CSS3 3d transformation and key frame, css33d

CSS3 3d transformation and key frame, css33d

3d transformation is implemented based on transform.
Transform-style: preserve-3d; create 3d space
Perspective:; depth of field(Set the user's viewing distance)
Perspective-origin: center; (default) base point of depth of field(Set the user's direction)
Backface-visility hide back
-Transform:; added the following functions in 3d:
RotateX () rotateY () rotateZ ()
TranslateZ ()
ScaleZ ()
Note: X indicates horizontal screen direction Y indicates vertical screen direction Z indicates vertical screen surface direction

-Webkit-animation:; animation
Required attribute
-Webkit-animation-name:; Key Frame name
-Webkit-animation-duration:; animation duration
Optional attributes
-Webkit-animation-timing-function:; Motion Form
-Webkit-animation-delay:; animation delay Time
-Webkit-animation-iteration-count number of repeated motion (if the value is infinite, it indicates unlimited repetition)

-Webkit-animation-play-state:; playback status (paused when the playback value is paused when the value is running)

-Webkit-animation-direction:; specifies whether the animation is reset before playback (
When the value is alterrate, the animation is executed alternately.
When the value is reverse, it indicates reverse animation execution.
If the value is alternate-reverse, the animation is executed in turn.
If the value is normal, the animation will jump directly to the 0% state for the second time and start execution.
)

Overall writing:-webkit-animation: 2 s 1 s move 5 semi alterrate; (the total time of motion the first time the delay time of the motion the key frame name repeat the number of motion forms the direction of motion)

@-Webkit-keyframes Key Frame
Method: @-webkit-keyframes move (move is the animation name ){
0% {
Style at the beginning
}
50% {
Style when moving to 50%
}
100% {
Style when moving to the end
}
}

Animation event
Events triggered after the animation movement ends
Google
Obj. addEventListener ('webkitanimationend', function () {}, false );
Firefox
Obj. addEventListener ('animationend', function () {}, false );