一个html+CSS+Js的3D动画代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
*
{
box-sizing:border-box;}
.cube-container img
{
width:400px;
height:400px;
}
.image-buttons input
{
width:100px;
height:100px;
}
.cube-container{
position:relative;
width:30rem;
height:30rem;
margin:5rem auto 6rem;
perspective:100rem;
}
.cube
{
position:absolute;
width:100%;
height:100%;
transform-style:preserve-3d;/*transform--style属性指定嵌套元素是怎样在三维空间中呈现。*/
transition:transform 1s cubic-bezier(0.32,0.05,0.35,1.6);
}
.cube-face-image
{
display:block;
position:absolute;
}
.image-buttons
{
display:grid;
grid-template-columns:repeat(3,auto);/*3列网格平铺，尺寸自适应*/
grid-gap:1.5rem; /*行与列格子之间的间隙*/
justify-content:center; /*项目位于容器的正中间*/
}
.image-buttons input
{
border:0.2rem solid #000;}
.image-buttons input:focus
{
outline:none;}
.image-1{
/*正值移向观察者，负值远离观察者*/
transform:translateZ(15rem)
}
.image-2
{
transform:rotateX(-180deg)translateZ(15rem)
}
.image-3
{
transform:rotateY(90deg)translateZ(15rem)
}
.image-4
{
transform:rotateY(-90deg)translateZ(15rem)
}
.image-5
{
transform:rotateX(90deg)translateZ(15rem)
}
.image-6
{
transform:rotateX(-90deg)translateZ(15rem)
}
.cube initial-position
{
transform:tanslateZ(-15rem) translateY(-2rem)
rotateX(-15deg) rotateY(18deg) rotateZ(2deg);
;
}
.cube.show-image-1
{
transform:translateZ(-15rem);
}
.cube.show-image-2
{
transform:translateZ(-15rem)rotateX(180deg);
}
.cube.show-image-3
{
transform:translateZ(-15rem)rotateY(-90deg);
}
.cube.show-image-4
{
transform:translateZ(-15rem)rotateY(90deg);
}
.cube.show-image-5
{
transform:translateZ(-15rem)rotateX(-90deg);
}
.cube.show-image-6
{
transform:translateZ(-15rem)rotateX(90deg);
}
</style>
<body>
<div class="cube-container">
<div class="cube initial-position">
<img class="cube-face-image image-1" src="img/1.jpg" alt="" />
<img class="cube-face-image image-2" src="img/2.jpg" alt="" />
<img class="cube-face-image image-3" src="img/3.jpg" alt="" />
<img class="cube-face-image image-4" src="img/4.jpg" alt="" />
<img class="cube-face-image image-5" src="img/5.jpg" alt="" />
<img class="cube-face-image image-6" src="img/6.jpg" alt="" />
</div>
</div>
<div class="image-buttons">
<input type="image" class="show-image-1" src="img/1.jpg" />
<input type="image" class="show-image-2" src="img/2.jpg" />
<input type="image" class="show-image-3" src="img/3.jpg" />
<input type="image" class="show-image-4" src="img/4.jpg" />
<input type="image" class="show-image-5" src="img/5.jpg" />
<input type="image" class="show-image-6" src="img/6.jpg" />
</div>
<script>
"use strict";
//DOM load event
window.addEventListener("DOMContentLoaded", function () {
var cube = document.querySelector(".cube"),
imageButtons = document.querySelector(".image-buttons");
var cubeImageClass = cube.classList[1]; //Add click event listener to image buttons container
imageButtons.addEventListener("click", function (e) {
//Get node type and class value of clicked element
var targetNode = e.target.nodeName,
targetClass = e.target.className; //Check if image input has been clicked and isn't the currently shown image
if (targetNode === "INPUT" && targetClass !== cubeImageClass) {
console.log("Show Image: ".concat(targetClass.charAt(11))); //Replace previous cube image class with new class
cube.classList.replace(cubeImageClass, targetClass); //Update cube image class variable with new class
cubeImageClass = targetClass;
}
});
});
</script>
</body>
</html>代码中间有几段代码我看不懂意思 求大佬帮忙解释解释
.cube.show-image-1
{
transform:translateZ(-15rem);
}
.cube.show-image-2
{
transform:translateZ(-15rem)rotateX(180deg);
}
.cube.show-image-3
{
transform:translateZ(-15rem)rotateY(-90deg);
}
.cube.show-image-4
{
transform:translateZ(-15rem)rotateY(90deg);
}
.cube.show-image-5
{
transform:translateZ(-15rem)rotateX(-90deg);
}
.cube.show-image-6
{
transform:translateZ(-15rem)rotateX(90deg);
}
<script>
"use strict";
//DOM load event
window.addEventListener("DOMContentLoaded", function () {
var cube = document.querySelector(".cube"),
imageButtons = document.querySelector(".image-buttons");
var cubeImageClass = cube.classList[1]; //Add click event listener to image buttons container
imageButtons.addEventListener("click", function (e) {
//Get node type and class value of clicked element
var targetNode = e.target.nodeName,
targetClass = e.target.className; //Check if image input has been clicked and isn't the currently shown image
if (targetNode === "INPUT" && targetClass !== cubeImageClass) {
console.log("Show Image: ".concat(targetClass.charAt(11))); //Replace previous cube image class with new class
cube.classList.replace(cubeImageClass, targetClass); //Update cube image class variable with new class
cubeImageClass = targetClass;
}
});
});
</script>为什么定义两个类.cube.show-image-6在一块 以及js各句代码什么用处
运行结果
.cube.show-image-6连在一起，则2个样式需要在一个dom对象才会有效，如下面的，单独加一个无效
<div class="cube show-image-6">
window.addEventListener("DOMContentLoaded", function () {//添加DOMContentLoaded事件
var cube = document.querySelector(".cube"),//获取样式为cube的第一个出现dom对象
imageButtons = document.querySelector(".image-buttons");//获取样式为image-buttons的第一个出现的dom对象
var cubeImageClass = cube.classList[1]; //获取cube dom对象的样式表中的第2个样式，classList存储加到这个样式上的所有样式，为DOMTokenList，这里的值为initial-position
imageButtons.addEventListener("click", function (e) {//给按钮添加click事件
//Get node type and class value of clicked element
var targetNode = e.target.nodeName,//e.target为当前点击的dom对象，如果点击的input就是input，如果非input就是imageButtons对象，等价于this，this为imageButtons，注意区分这2点
targetClass = e.target.className; //点击的dom
if (targetNode === "INPUT" && targetClass !== cubeImageClass) {//这里判断点击的按钮样式不是initial-position或者上次点击的按钮的样式时执行下面的代码
console.log("Show Image: ".concat(targetClass.charAt(11))); //Replace previous cube image class with new class //获取点击的按钮的数字部分，charAt获取字符串指定位置的字符
cube.classList.replace(cubeImageClass, targetClass); //Update cube image class variable with new class 这里切换样式，替换掉初始化样式或者上次点击的按钮样式为当前的
cubeImageClass = targetClass;//更换变量值为当前点击的按钮的样式，这样点击击相同的按钮时，if判断不是同一才会切换样式
}
});
});
您的问题已经有小伙伴解答了，请点击【采纳】按钮，采纳帮您提供解决思路的答案，给回答的人一些鼓励哦～～
ps:开通问答VIP，享受5次/月 有问必答服务，了解详情↓↓↓
【电脑端】戳>>> https://vip.csdn.net/askvip?utm_source=1146287632
【APP 】 戳>>> https://mall.csdn.net/item/52471?utm_source=1146287632
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632