SS3 3D conversion and CSS3 animation
css3 3d conversion
Introduce
the 3d effect in css3 is just a visual pseudo 3d
2d conversion mainly revolves around the x-axis and y-axis, and the 3d conversion has an extra z-axis relative to the 2d conversion.
Related properties
transform 2d/3d Transform
translate3d(x,y,z) / translateX translateY translateZ
scale3d(x,y,z) / scaleX scaleY scaleZ
rotate3d(x,y,angle) / rotateX(angle) rotateY(angle) rotateZ(angle)
transform-origin change Base point
transform-style Open 3D space
Normally, we have no way to create 3D space. We need to open 3D space through the attribute transform-style.
transform-style: flat|preserve-3d;
perspective Viewing distance The distance between the
observer's line of sight parallel to the Z axis and the screen is the viewing distance, referred to as the viewing distance.
The view distance must be set on the body of the parent element to have an effect.
perspective-origin Depth of field base point
determines the direction from which to view the element
backface-visibibility Backface hiding
When a transparent polyhedron exists, this attribute can be used to hide the back of the overlapping transparent two sides
animation
If you need to move an element, can be achieved through animation animation
related properties
Animation-name calling keyframes
Animation-duration set completion time
Animation-timing-function speed of the animation curve
Animation -delay delay
Animation-iteration-count animation should be played The number of times
N Set the number of times of play.
Infinite Play the
animation-direction infinitely. The animation-direction specifies whether the animation should be played in reverse.
Normal
alternate The animation should be played in reverse.
Animation-play-state Paused/Run
Paused Paused
Running Run
Animation-fill-mode Specifies that the animation is playing Before or after, whether the animation effect is visible.
None Does not change the default
Forwards. When the animation is completed, the last attribute value is maintained.
Backwards. Within a period of time specified by Animation -delay, before the animation is displayed, the starting attribute value is applied.
Both forward and backward fill modes are applied
Shorthand
Animation: name duration timing-function delay iteration -count direction
Keyframes
@keyframes name { 0% {code …} 10% {code …} 20% {code …} }
You can also set from and to:
@keyframes name { from {} to {} } animate animation library Some animation effects can be achieved through the animate animation library. URL https://daneden.github.io/animate.css/ Usage: Introduce animate.css into the code, and set the corresponding class name to different elements.