css in-depth front-end chapter before 2020, fully grasp the css animation [transform]

Keywords: Front-end css3 less Javascript Attribute

Written in front

It will be 2020 soon. Do you know that my friends have learned css3 animation this year?

Speaking of css animation is a very awkward thing. On the one hand, because the company uses less css animation, on the other hand, most developers are accustomed to using JavaScript to do animation, so many programmers are more excluded to learn css animation (at least I am), but a front-end engineer who doesn't understand css animation can't call it mastering css3. In fact, when you really learn css animation, After that, you will be attracted by its charm. It can reduce the amount of code and improve the performance.

We have learned the use of animation and transition together in the previous articles. If there are students who don't know about it, you can check my previous articles.

Today, we finally start to learn transform and translate. In fact, translate is only an attribute of transform, but many beginners are easy to confuse transform, translate and transition, so I put them together to write. Don't confuse them, guys.

If you don't say much, please join me to learn today's transform ation.

transform syntax

value	describe
none	The definition is not converted.
translate(x,y)	Define 2D conversion.
translate3d(x,y,z)	Define 3D conversion.
translateX(x)	Define the conversion, just use the value of the X axis.
translateY(y)	Define the conversion, just use the value of the Y axis.
translateZ(z)	Define 3D conversion, just use the value of Z axis.
scale(x[,y]?)	Define 2D scale conversion.
scale3d(x,y,z)	Define the 3D scale conversion.
scaleX(x)	Defines the scale conversion by setting the value of the X axis.
scaleY(y)	Defines the scale conversion by setting the value of the Y axis.
scaleZ(z)	Define the 3D scale conversion by setting the value of the Z axis.
rotate(angle)	Define 2D rotation and specify the angle in the parameters.
rotate3d(x,y,z,angle)	Define 3D rotation.
rotateX(angle)	Defines the 3D rotation along the X axis.
rotateY(angle)	Defines the 3D rotation along the Y axis.
rotateZ(angle)	Defines the 3D rotation along the Z axis.
skew(x-angle,y-angle)	Defines the 2D tilt conversion along the X and Y axes.
skewX(angle)	Defines the 2D tilt conversion along the X axis.
skewY(angle)	Defines the 2D tilt conversion along the Y axis.
perspective(n)	Define a perspective view for the 3D transform element.

transform literally means deformation, change. It seems that he has many attributes. In fact, we sum up the following four attributes.

Rotate
Skew (distortion)
Scale (scale)
Translate (move)

rotate

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes rotate{
    0%   {transform:rotate(0deg);}    
    100%   {transform:rotate(360deg);}
}
@keyframes rotateX{
    0%   {transform:rotateX(0deg);}    
    100%   {transform:rotateX(360deg);}
}
@keyframes rotateY{
    0%   {transform:rotateY(0deg);}    
    100%   {transform:rotateY(360deg);}
}

.rotate{
    animation:rotate 2s infinite linear;
}
.rotateX{
    animation:rotateX 2s infinite linear;
}
.rotateY{
    animation:rotateY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="rotate">
    <img src="./y.png" alt="" class="rotateX">
    <img src="./y.png" alt="" class="rotateY">
</body>

There are three properties to show here: rotate, rotateX, and rotateY. They represent rotation according to the specified angle on the plane, rotation along the X axis, and rotation along the Y axis.

translate move

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes translate{
    0%   {transform:translate(0px,0px);}    
    100%   {transform:translate(100px,100px);}
}
@keyframes translateX{
    0%   {transform:translateX(0px);}    
    100%   {transform:translateX(100px);}
}
@keyframes translateY{
    0%   {transform:translateY(0px);}    
    100%   {transform:translateY(100px);}
}

.translate{
    animation:translate 2s infinite linear;
}
.translateX{
    animation:translateX 2s infinite linear;
}
.translateY{
    animation:translateY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="translate">
    <img src="./y.png" alt="" class="translateX">
    <img src="./y.png" alt="" class="translateY">
</body>

There are three attributes here: translate(x,y), translateX(x), and translateY(Y). It represents the horizontal direction and vertical direction moving at the same time, only the horizontal direction moving, only the vertical direction moving.

scale zoom

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes scale{
    0%   {transform:scale(0.1,0.1);}    
    100%   {transform:scale(1,1);}
}
@keyframes scaleX{
    0%   {transform:scaleX(0.1);}    
    100%   {transform:scaleX(1);}
}
@keyframes scaleY{
    0%   {transform:scaleY(0.1);}    
    100%   {transform:scaleY(1);}
}

.scale{
    animation:scale 2s infinite linear;
}
.scaleX{
    animation:scaleX 2s infinite linear;
}
.scaleY{
    animation:scaleY 2s infinite linear;
}

</style>
<body>
    <img src="./y.png" alt="" class="scale">
    <img src="./y.png" alt="" class="scaleX">
    <img src="./y.png" alt="" class="scaleY">
</body>

There are three properties to show here: scale(x,y), scale x (x), scale y (y). It represents the horizontal direction and vertical direction scaling at the same time, only the horizontal direction scaling, only the vertical direction scaling. But they have the same scaling center point and cardinality, where the center point is the center position of the element, and the scaling cardinality is 1. If its value is greater than 1, the element will be enlarged; otherwise, if its value is less than 1, the element will be reduced.

skew distortion

<style>
img{
    margin-left: 50px;
    width:50px;
    height:50px;
    /* border-radius:50%; */
}
@keyframes skew{
    0%   {transform:skew(0deg,0deg);}    
    100%   {transform:skew(25deg,25deg);}
}
@keyframes skewX{
    0%   {transform:skewX(0deg);}    
    100%   {transform:skewX(25deg);}
}
@keyframes skewY{
    0%   {transform:skewY(0deg);}    
    100%   {transform:skewY(25deg);}
}

.skew{
    animation:skew 2s infinite linear;
}
.skewX{
    animation:skewX 2s infinite linear;
}
.skewY{
    animation:skewY 2s infinite linear;
}
</style>
<body>
    <img src="./y.png" alt="" class="skew">
    <img src="./y.png" alt="" class="skewX">
    <img src="./y.png" alt="" class="skewY">
</body>

There are three properties to show here: skew(x,y), skew(x), skew (y). They represent the horizontal direction and the vertical direction at the same time, only the horizontal direction and only the vertical direction.

conclusion

Today, we have learned the common attributes of transform. You will find that they are very simple. You just need to remember rotate, skew, scale, and translate. What they represent is that they will deform at the same time as the X and Y axes. Plus X or Y, they will deform in that direction.

So far, we have learned all the content of css3 animation together, and the rest needs you to practice more. If you see interesting animation on other websites, you need to find a way to use css animation to achieve it. After you practice, you will really master it, so you can count on mastering css animation by 2020!

epilogue

The above is the whole content of this article. If there is something wrong, please correct it.

Thank you for reading. If you feel useful, please like / forward.

The front-end in-depth series is a stepping hole series, which is an exploration and summary of my own problems and stepping holes in work and study. It is recorded and shared here, and it is also a reflection and questioning of my own skills.

The front end is full of road, and there are many steps.

The front end in-depth series is continuously updated...

Above 2019-10-30.

Posted by Koobazaur on Tue, 29 Oct 2019 21:04:25 -0700

Programmer Group