0506css3 (2D, 3D) animation

|-change transform
|--2D
|----rotate(deg) rotate deg angle in plane
|----translate(horizontal, vertical) move
|----scale(width, height) zoom
|--- -skew(horizontal angle, vertical angle) twist
|
--3D |----rotateX(deg) rotate along X axis
|----rotateY(deg) rotate along Y axis|-transition
: 3s time 3 seconds who Change to whom to add transition
| -animation|
--attribute: animation: animation name, duration, execution method
|--@keyframes animation name{
                    0%{} starting state
                    1%~99%{} state in process
                    100 {} end state
    }
|--@keyframes animation name{
                    from{}
                    to{}
    }

/*Variety*/
.first{
    width: 200px;
    height: 200px;
    background-color: gold;
    transition: 3s;
}
.first:hover{
    /*2D*/
    transform: rotate(30deg);/*rotate in plane*/
    transform: translate(50px, 50px); /* position shift: right, down */
    transform:scale(1.5,2);/*Multiplier scaling*/
    transform:skew(20deg,20deg);/*扭曲*/
    /*3D*/
    transform:rotateX(180deg);/*rotate along the X axis*/
    transform:rotateY(360deg);/*rotate along the Y axis*/
}
.second{
    width: 300px;
    height: 300px;
    background: black;
    position: relative;/* Since the position needs to be changed, the position attribute is added*/
    animation: donghua 5s infinite alternate;/*infinite infinite loop alternate reverse play*/
}
@keyframes donghua{/*Change the position color shade...*/
    0%{background:red; border-radius: 90px; box-shadow: -35px 0px 15px gray; left: 0px; top: 0px;}
    20%{background:blue; border-radius: 30px; box-shadow: 0px 15px 10px beige; left: 200px; top: 0px;}
    40%{background:blueviolet; border-radius: 50px; box-shadow: 35px 5px 5px navy; left: 300px; top: 100px;}
    60%{background:gold; border-radius: 70px; box-shadow: 70px 40px 0px bisque; left: 200px; top: 200px;}
    80%{background:green; border-radius: 150px; box-shadow: 35px 35px 5px aliceblue; left: 0px; top: 200px;}
    100%{background:magenta; border-radius: 90px; box-shadow: -35px 0px 15px blue; left: 0px; top: 0px;}
    from{background:red; border-radius: 90px; box-shadow: -35px 0px 15px gray; left: 0px; top: 0px;}
    to{background:gold; border-radius: 70px; box-shadow: 70px 40px 0px bisque; left: 200px; top: 200px;}
}
.fangda{
    width: 55px;
    height: 55px;
    border: 1px solid blueviolet;
    overflow: hidden;
}
img{
    transition: 3s;
}
img:hover{
    transform: scale(1.5);
}