<!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各句代码什么用处
运行结果
