“This is the sixth day of my participation in the Gwen Challenge.

Effect:

Let’s look at the position of the XYZ axis

By default, the coordinate origin is at the center of the element, i.e. :

transform-origin: 50% 50% 0; The default value

The drawing is like this: the Z axis is vertical out of the screen, the direction of the XYZ axis is in accordance with the left hand spiral law (learn the content of physical electromagnetic field), the thumb is pointing in the positive direction of the Z axis, the other four fingers are clenched naturally, from the positive direction of the X axis to the positive direction of the Z axis

Something like this: The direction of the curve is the direction in which the hand rotates to determine whether XYZ meets the left hand spiral rule

So when we rotate the box a little bit along the Y-axis, the coordinate axis looks like this:

The X-axis turns in, and the Z-axis turns out to the right from the vertical screen



The picture goes like this along the Y-axis:



Something like this

At this point, if you want the box to go forward, it’s translateZ,



Add a demo image and set position, left, and top to 0, so that the two demos are on one line. Otherwise, div will monopolise the line and the effect will not appear

(Because of transform-Origin, the image on the right is rotated slightly off Angle)

So, what we want to do is to rotate the six images along the Y-axis like this, so that the “meter” is less vertical, and each one moves forward another 200px, so that it looks like a hexagon

If the two images rotate at exactly 180 degrees apart, they overlap and move back-to-back, perpendicular to themselves



It goes like this:



Let me just write down my thoughts

First, create the inside effect, each image 60deg apart

.wrapper {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 200px auto;
    transform-style: preserve-3d;
    transform: rotateX(60deg);
}
.item {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    line-height: 200px;
    opacity: 0.5;
    text-align: center;
    color: #fff;
    font-size: 30px;
    
}
.item:nth-child(1) {
    background: royalblue;
    transform: rotateY(60deg);
}
.item:nth-child(2) {background: salmon;
    transform: rotateY(120deg);
}
.item:nth-child(3) {
    background: slateblue;
    transform: rotateY(180deg);
}
.item:nth-child(4) {
    background: springgreen;
    transform: rotateY(240deg);
}
.item:nth-child(5) {
    background: pink;
    transform: rotateY(300deg);
}
.item:nth-child(6) {
    background: purple;
    transform: rotateY(360deg);
}
Copy the code

Effect:

Then move each image 200px in front of the transform under each nTH-Child and add one translateZ(200px); Such as:

.item:nth-child(1) {
    background: royalblue;
    transform: rotateY(60deg) translateZ(200px);
}
Copy the code

See the effect:



Finally set up the rotation animation and adjust the translateX of the parent container.

The parent container Wrapper modifies the translateX and calls the animation:

transform: rotateX(30deg);
animation: move 10s linear infinite;
Copy the code

Animation frames:

@keyframes move {
    0% {
        transform: rotateX(-20deg) rotateY(360deg);
    }
    100% {
        transform: rotateX(-20deg) rotateY(0); }}Copy the code

Results: The following row is the first, 1-2-3-4-5-6:



The rotation above is first along the X axis and then along the y axis:

If you put rotateY before rotateX, you will rotateY first, then x, and the effect will be different:



As the box rotates along the y axis, the directions of the X and Z axes are constantly changing, so the effect is that the direction is constantly changing