1. Animation effect
1. Transform property
The Transform property applies a 2D or 3D transformation to the element. This property allows you to rotate, scale, move, skew, etc. the element.
With this attribute, the next step is to set the animation time and animation form.
2, animation animation properties
grammar:
animation：（ animation-name animation–duration animation-timing-function animation-delay animation-iteration-count animation-direction）
Let's take a look at what these values mean:
| value | illustrate |
| animation-name | Animation name created by @keyframes |
| animation–duration | how many seconds the animation takes to complete |
| animation-timing-function | 过渡方式（linear、ease、ease-in、ease-out、ease-in-out） |
| animation-delay | delay |
| animation-iteration-count | The number of times the animation is played (the value is usually an integer, and the default value is 1; the special value infinite means that the animation is played infinitely) |
| animation-direction | The playback direction of the animation (normal: the animation loops forward every time; alternate: the animation plays forward when it plays an even number of times) |
Let's demonstrate with a small exercise:
small balloon
code show as below:
2. 3D effect
To achieve a 3D effect, a perspective attribute must be added to the parent element
1. translate3d (X, Y, Z) respectively represent the x-axis distance, y-axis distance and z-axis distance; but translateZ can also be set separately
translate
2. rotateX: rotateX is to rotate around the X axis, a positive value is to rotate upwards, and a negative value is to rotate downwards
rotateY: rotateY is to rotate around the Y axis, a positive value is to rotate to the right, and a negative value is to rotate to the left
rotateZ: tateZ rotates around the Z axis, a positive value rotates clockwise around the center point, and a negative value rotates counterclockwise around the center point
to rotate
3、transform-sty
If you want the child element to have a 3D effect, you must set the transform-style attribute for the parent element
Set the upper and lower positions after rotation, and set the transform-origin attribute for the child element
penetrate
