1, the transition ( Transition )
transition: the transition to attribute to spend time motion curve when to start; multiple sets of attributes change, or separated by commas
transition-property: name of the CSS attribute specified application transition.
transition-duration: the time it takes to define the transition effect, the default is 0.
transition-timing-function: the predetermined time profile transition effects, ease default
linear: uniform ease: slow down for ease-in: acceleration ease-out: deceleration ease-in-out: After the first acceleration and deceleration
transition-delay: when to start the transition effect specified, the default is 0
Abbreviations: Transition: All 0.5s; // all properties to perform transition takes 0.5 seconds
2, the deformation (Transform)
1. Displacement ( Translate (X, Y) )
transform: translateX (x); // only horizontal movement direction
transform: translateY (y); // only the vertical direction
transform: translate (20px, 10px) ; // pan right, and down, respectively 20px, 10px
2. Zoom ( Scale (X, Y) )
transform: scaleX (x); // only scaled horizontally
transform: scaleY (y); // only scaled vertically
Transform: Scale (0.5,0.5); elements x, y direction reduction 0.5
3. Rotate ( Rotate (deg) )
The elements rotate, positive clockwise, counterclockwise negative
transform: rotate (180deg); // rotate 180 degrees clockwise
transform-origin: top right; // convert deformable element may be adjusted by default origin center point of the rotation, if desired precise location, the pixels can be in px
4.倾斜( skew (you, you) )
Transform: skew (30deg, 0deg) ; // the elements tilted 30 degrees in the horizontal direction, the vertical direction is not changed by a skew method.
5.3D deformation ( Transform (X, Y, Z) )
x is negative on the left, the right is positive
The above y is negative, a positive value is below
z is negative inside, the outside is positive
Transform: rotateX (180deg); // rotation about the X-axis
transform: rotateY (180deg); // rotation about the Y axis
transform: rotateZ (180deg); // similar conventional rotary
6. Perspective (Perspective)
As a general perspective attribute child elements arranged to effect conversion of the parent element to all 3D
perspective: 500px; // principle of perspective: near the far smaller