css3d图片切换 |scss 除法计算

#box {
width: 500px;
height: 300px;
position: relative;
perspective: 1000px;
}
.image {
width: 500px;
height: 300px;
position: absolute;
top: 0;
left: 0;
transform-origin: 50% 50% -150px;
transition: transform 1s ease-in-out;
}
.image:nth-child(1) {
transform: rotateY(0deg) translateZ(150px);
}
.image:nth-child(2) {
transform: rotateY(72deg) translateZ(150px);
}
.image:nth-child(3) {
transform: rotateY(144deg) translateZ(150px);
}
.image:nth-child(4) {
transform: rotateY(216deg) translateZ(150px);
}
.image:nth-child(5) {
transform: rotateY(288deg) translateZ(150px);
}

上述代码中，将多张图片放在一个div容器中，每张图片用class为“image”的div元素表示。然后设置容器的perspective属性，使其具有3D效果。接下来，通过为每个图片元素设置transform-origin属性，可以将其放置在3D空间中，以便于其在3D空间中旋转。最后，通过在CSS中设置每个图片的transform属性，使其能够在3D空间中旋转，形成图片切换的效果。