3 d rolling effects
1. The special effects is relatively cool animation generally refers to;
2. Some attributes are used to define the animation, such as: the transition and animation;
3. These properties can make animation displacement, rotation, scaling, and achieve more different effect;
4. In the range, but also defines the transform attribute to finish 2 d or 3 d effects;
5. The Transform is defined in some elements of grammar, as follows:
None definition does not transform,
Matrix (n, n, n, n, n, n) to define a 2 d transformation, using six value matrix,
Matrix3d (n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) define 3 d conversion, using 16 values of 4 x4 matrix,
Translate (x, y) definition of 2 d transformation,
Translate3d (x, y, z) define 3 d conversion,
TranslateX (x) define the transformation, just using the value of the x axis,
TranslateY (y) define the transformation, just using the value of the y axis,
TranslateZ definition (z) 3 d conversion, just using the value of the z axis,
Scale (x, y) definition of 2 d scaling transformation,
Scale3d (x, y, z) define 3 d scaling transformation,
ScaleX (x) by setting the value of the x axis to define the scale conversion,
ScaleY (y) by setting the value of the y axis to define the scale conversion,
ScaleZ (z) by setting the value of z axis to define the 3 d scale conversion,
Rotate (Angle) definition of 2 d rotation, the parameters specified in the point of view,
Rotate3d (x, y, z, Angle) define the 3 d spin,
RotateX (Angle) defined along the X axis of the 3 d spin,
RotateY (Angle) defined along the Y axis of the 3 d spin,
RotateZ (Angle) defined along the Z axis of 3 d rotation,
Skew (x - Angle, y - Angle) defined along the x and y axis tilted 2 d transformation,
SkewX (Angle) to define the 2 d tilt along the X axis transformation,
SkewY (Angle) defined along the Y axis tilted 2 d transformation,
Perspective (n) to 3 d conversion element defines the perspective view,
6. Realize 3 d rolling effect;
7. To define a layout; As follows:

8. Then, give div a high, wide and then set the following attributes;
The transform - style: preserve - 3 d;//is defined as a 3 d style;
The transition: 1.5 s;//carrying out the length of the animation;
The transform: translateZ (60 px);//set the administrative levels sense, similar to the z - the index attribute
The transform: rotateY (180 deg);//rotation, with 1 similar to rotate 80 degrees;