3D,

The 3d effect can only be seen through long-distance observation. Because the distance is too close, we can only see the 2d effect of the plane. Therefore, we need to set the depth of field before setting the 3d transformation effect:

perspective: 1200px; /* Use in the parent element to set the depth of field*/

At the same time, we also need to set which point of the screen to observe the 3d effect inside the screen:

perspective-origin: 50% 50%;

For 3d effect, it also has translation and rotation, but because translation and rotation are also applicable to 2d effect, we also need to tell the browser that the current scene is carried out under 3d effect:

transform-style: preserve-3d; /* Show in 3D space*/

Rotation

Syntax:

Transform: rotatex (rotation angle)/* How much angle does it rotate about the x axis*/
Transform: rotate/* How much angle does it rotate about the y axis*/
Transform: rotatez (angle of rotation)/* How much angle does it rotate about the z axis*/

Translation

Syntax:

Transform: translatex (pixel value)/* Move horizontally, positive value to the right and negative value to the left*/
Transform: translatey (pixel value)/* Move vertically, positive value downward, negative value upward*/
Transform: translatez (pixel value)/* Move in the z-axis direction, with positive values closer to the eyes and negative values farther away from the eyes*/
Transform: translate3d (horizontal pixel value, vertical pixel value, z-axis pixel value)/* Compound writing*/

Example

<style>
    .box{
        width: 500px;
        height: 500px;
        border:1px solid #000;
        perspective: 1200px;
        perspective-origin: 50% 50%;
        transform-style: preserve-3d;
        margin: 50px auto;
        position:relative;
    }
    .box .small{
        width: 100px;
        height: 100px;
        background-color: #f00;
        position: absolute;
        left: 0;
        top: 0;bottom: 0;
        right: 0;
        margin: auto;
        transition: all 3s;
    }
    .box:hover .small{
        /* z Axis translation, a positive number indicates closer distance */
        /* transform: translateZ(-300px); */

        /* x Axis translation, positive number to the right */
        /* transform: translateX(100px); */

        /* y Axis translation, positive number down */
        /* transform: translateY(100px); */


        /* x Axis rotation, positive angle backward */
        /* transform: rotateX(45deg); */

        /* y Axis rotation, positive angle, right back */
        /* transform: rotateY(45deg); */

        /* Positive angle right down */
        /* transform: rotateZ(45deg); */
    }
</style>
<div class="box">
    <div class="small"></div>
</div>

Animation

Define animation

@keyframes animation name{
/ * element initial state*/
From {/ * from can also be written as 0%*/
/ * element first keyframe style*/
    }
/ * animation execution to a certain scale - keyframe*/
Percent {/ * the percent in the middle refers to the percentage of animation execution, such as 50%. Multiple keyframes can be written*/
/ * style of a key frame*/
    }
/ * end of animation style*/
To {/ * to can also be written as 100%*/
/ * last keyframe style*/
    }
}

Use animation

Animation: animation name: length of time required for animation, speed mode, delay time, infinite / number of times, whether the animation moves in reverse, whether the animation ends, and whether it stays at the end position/* Compound writing*/
/*Single writing*/
Animation name: defined animation name;
Animation duration: the time required for animation/* The unit can be s seconds or MS milliseconds -- 1s = 1000ms*/
Animation timing function: speed mode;
Animation delay: delay time;
Animation iteration count: playback times (number) or infinite;
animation-direction: normal/alternate; /* normal means forward play, alternate means forward play for the first time, reverse play for the second time, and forward play for the third time*/
animation-fill-mode: forwards/none; /* The animation stops at the last frame or start position*/
animation-play-state: paused/running; /* Specifies whether the animation is running or paused. The default is running*/

Example

 

<style>
/* Define animation */
/* @keyframes Ha ha{ */
    /* Define keys */
    /* initial position  */
    /* 0%{ css Style} */
    /* from{ css Style} */

    /* Middle keyframes - percentage used */
    /* 50%{} */

    /* End position */
    /* 100%{} */
    /* to{} */
/* } */

.box{
    width: 800px;
    height: 300px;
    border: 1px solid #000;
}
.small{
    width: 100px;
    height: 100px;
    background-color: #f00;
    margin-top: 100px;
    animation: wid 3s infinite alternate;
}
@keyframes wid{
    to{
       margin-left: 650px;
       transform: scale(2) rotate(720deg); 
    }
}
.box:hover .small{
    /* Use animation */
    /* animation: Duration required for animation name; */

    /* animation: xuanzhuan 5s; */

    /* Specifies the animation name */
    /* animation-name: wid; (Animation name (both Chinese and English)*/

    /* Specify animation duration */
    /* animation-duration: 5s; */
    /* animation-duration: 1s; */

    /* Specify speed mode */
    /* animation-timing-function: linear; */

    /* Specify the delay time */
    /* animation-delay: 2s; */

    /* Specifies the number of times the animation is executed */
    /* animation-iteration-count: 1; */
    /* animation-iteration-count: infinite; */

    /* Specify the execution direction of the animation: direction */
    /* animation-direction: alternate; */
    /* 
        normal: Return to the original point and start again after the execution in the positive direction
        alternate: When the execution in the positive direction ends, the animation in the opposite direction will come back
    */

    /* Set whether the label element stops at the start position or the end position after the animation */
    /* animation-fill-mode: none; */
    /*
    forwards Leave the label element at the end of the animation
    none After the animation, the element returns to its original position
    */

    /* Sets whether the animation runs or stops */
    animation-play-state: paused;
}
</style>
<div class="box">
    <div class="small"></div>
</div>