CSS3 Foundation (3d②) to seek fans

4 C ( 3.1 )Rotatey

around the Y axis for rotation

(1) positive number is (standing on the right side of the push), negative number is (standing on the left side of the push)

( 2.1 ) defines whether the element's past is visible

1. Backface-visibility:visible|hidden;

Description: visible indicates visibility,hidden means invisible

to test the Bézier curve URL:http://xuanfengge.com/easeing/ceaser/

( 1 )Translatez

is in The Z- axis moves back and forth, but without a perspective, the effect is completely invisible, so the general transform:translatez () are used in conjunction with perspectives

Small experience:Translatez and rotate combine to produce a different 3D effect, and the effects of the order are distinct, if first  Rotate in the Translatez element is rotated within the space and if it is Translatez in rotate the element is rotated on a straight line.

Positive values are convex, negative opposite.

( 2 ) Perspective (Depth of field)

1. Perspective: Value

   　　

Description: The smaller the pivot value, the stronger the perspective, the greater the value, the weaker the perspective, and the perspective added to the parent

( 3 ) Vanishing Point (pivot point, vanishing Point)

1. Perspective-origin: Value

   　　

is the direction of the 3D godless.

Description: The value can be a pixel or a percentage, or it can be an azimuth noun, the default value is 50%,50%(center point)

( 4 )Transform-style

function: Specify how nested elements are displayed in 3D space

1. Tranform-style: Value preserve-3d

   　　

Value Description:flat is the default value so that child elements do not retain their 3D position, preserve-3d Let the child element retain its 3D position and add it to the Father .

Small Summary: Perspective The vanishing point Transform-style are all added to the parent .

Key: when the element occurs 3D flipping, the entire coordinate system also follows the flip!!

( 5 ) animation of CSS3

1. Animation: Value

   　　

Value Description:

(1) Custom animation name

(2) The duration unit of the animation is s or Ms

(3) The curve of the animation

(4) When the animation starts

(5) control the number of times the animation execution has no units, has been executed:infinite

(6) control whether the animation plays back in reverse default value normal reverse:Alternate

(7) control animation playback and pause the default value is play:running pause:paused

(8) The last stop position of the animation forwards let the animation stay in the last frame

animation must first write animation and then match @keyframes to write the custom animation

@ Browser prefix keyframes Custom animation name {  0%{    //css statement   }   ...  100%{    //css statement     }  }

Cases:

1. 1 @keyframes laowang{2 0%{3 width:100px;4 height:100px;5 left:0;6 transform:rotate (0deg);7 }8 50%{9 width:800px;Ten height:800px; One transform:rotate (720deg); A } - 100%{ - width:500px; the height:500px; - left:800px; - transform:rotate ( -720deg); - } +}

(4) frame animation

Steps(number of frames)

In fact, let the animation into how many steps to execute,steps() inside the value is the total number of pictures -1 , in the production of the sprite chart when the width of each screen as far as possible, and suggested in a row of the display

(5) use of the ANIMATE.CSS library

Official website:https://daneden.github.io/animate.css/

Role: All common animation directly encapsulated, developers do not need to consider the implementation process, only need to add the corresponding class to achieve animation effect

Steps to use:

(1) Bring the downloaded Animate.css to your project

(2) go to the official website to get the desired effect . Add the animated class (required) and the desired effect class to the corresponding element

CSS3 Foundation (3d②) to seek fans