The 6 faces are marked with numbers 1-6, and the corresponding relationship between the numbers and the faces of the cube is:
front 1 up 2 back 3 down 4 left 5 right 6
.wrapper {
perspective: 600px;
}
.box {
transform-style: preserve-3d;
height: 200px;
width: 200px;
position: relative;
margin: 100px auto;
animation: move 5s linear infinite;
}
.item {
position: absolute;
left: 0;
top: 0;
height: 200px;
width: 200px;
border: 1px solid black;
color: #fff;
line-height: 200px;
text-align: center;
opacity: 0.5;
}
.item:nth-child(1) {
background: royalblue;
transform: translateZ(100px);
}
.item:nth-child(2){
background: salmon;
transform: rotateX(90deg) translateZ(100px);
}
.item:nth-child(3) {
background: slateblue;
transform: rotateX(180deg) translateZ(100px);
}
.item:nth-child(4) {
background: springgreen;
transform: rotateX(-90deg) translateZ(100px);
}
.item:nth-child(5) {
background: pink;
transform: rotateY(-90deg) translateZ(100px);
}
.item:nth-child(6) {
background: purple;
transform: rotateY(90deg) translateZ(100px);
}
@keyframes move {
0% {
transform: rotate3d(1,1,1,0);
}
100% {
transform: rotate3d(1,1,1,360deg);
}
}
<div class="wrapper">
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>
effect:
When positioning the 6 surfaces, pay attention to which axis is to be rotated first, and then which axis is rotated. For
example, the surface where the number "2" is, which is the upper side. Rotate the X axis by 90 degrees, and then translate in the positive direction of the Z axis. 100px
If you first translate along the z-axis, and then rotate along the x-axis, the
picture will first move to the screen, and then flip along the X-axis, so that the position of the final picture is on the original xoz plane
(the origin of the coordinate axis is set to point o, and the final state of the picture is : Lie flat on the xoz surface of the original coordinate axis system, similar to a small person, run 100px to the screen, and then lie on the spot),
this position does not satisfy the original setting of the cube surface and the number corresponding to the number, and the height is direct Reduced in half
Then there is transform: rotate3d(x,y,z,ndeg); which is not mentioned before, which refers to the
case of rotating ndeg along the direction of xyz resultant force. In the case of xyz and ndeg , both are set to 1.
