This is the fourth day of my participation in the First Challenge 2022

preface

Hello, everyone, I do not eat fish d cat, then above, we said 3d animation, also left you the topic, how to achieve the cube, today we come to achieve, in 3D space very good implementation.

rendering

Implementation of analytic force cube

Translate3d (x,y,z) | | | | | | | | | | | | | | | | | Rolate3d (x,y,z,deg) ah. So how do you get him moving??

CSS animation animation

steps

1. Create the animation
2. Trigger the animation

Create animation @keyframes in two ways

//move is the animation name
 @keyframes move {
            0% {}100% {}}Copy the code

//move is the name of the animation
 @keyframes move {
            from {
            }
            to {
            }
        }
Copy the code

Trigger the animation

The animation property can have eight parameters separated by Spaces: 1 Animation name 2 execution time 3 animation speed 4 Animation delay 5 Execution number (infinite) 6 Execution direction 7 Execution state 8 Animation stop position;

Code implementation

First there are six boxes under the parent element

 <div>
        <p class="box1"></p>
        <p class="box2"></p>
        <p class="box3"></p>
        <p class="box4"></p>
        <p class="box5"></p>
        <p class="box6"></p>
    </div>
Copy the code

Transform-style: preserve-3d; Position: relative; . Position: absolute; Put them on top of each other.

Animate the parent element

// Linear is a uniform motion
 animation: move 10s linear infinite;
 @keyframes move {
            from {
                transform: rotate3d(1.1.1, 0deg);
            }
            to {
                transform: rotate3d(1.1.1, 360deg); }}Copy the code

Judgment of deformation midpoint of child element

As shown in the figure below, the midpoint of the side deformation of the cube is at the red dot

Then we rotate and shift in 3D space, as shown in the following GIF.

The yellow box has shifted its length backwards

 div>.box1 {
            background-color: yellow;
            transform: translateZ(-200px);
        }
Copy the code

The blue box is rotated 90 degrees, and note that transform-Origin is the center of the set deformation.

 div>.box2 {
            background-color: blue;
            transform-origin: 0px 0px;
            transform: rotateX(-90deg);
        }
Copy the code

The green box is also rotated 90 degrees, but at a different midpoint

 div>.box3 {
            background-color: green;
            transform-origin: 100% 100%;
            transform: rotateX(90deg);
        }
Copy the code

Pink box

div>.box4 {
            background-color: pink;
            transform-origin: 100% 100%;
            transform: rotatey(-90deg);
        }
Copy the code

Orange box

 div>.box5 {
            background-color: orange;
            transform-origin: 0 100%;
            transform: rotatey(90deg);
        }
Copy the code

The last

Add a larger cube outside the cube, use the pseudo-class selector hover, and the state after mouse is moved in. After mouse is moved in, the outside cube is removed, and the background is more transparent, so the effect will be more obvious. Here comes a beautiful rotating cube album for your girlfriend. Play around with CSS and get creative.