CSS3 3D and 2D

3D rotation of the CSS3:
Roratex (): When the parameter is positive, the box revolves around the x-axis and completes the rotation from the y-axis positive direction to the negative direction of the y-axis, visually showing a change in height.
Roratey (): When the parameter is positive, the box revolves around the y-axis and completes the rotation from the positive direction of the x-axis to the negative direction of the x-axis, visually presenting a change in the width of the box.
Css2d Rotation:
Translate (A, B): A, B, both greater than 0 o'clock, a means displacement in the horizontal direction (from left to right), and a vertical displacement (from the top down),
Rotate (a): A>0, the degree of clockwise rotation on the horizontal plane, the degree of counterclockwise rotation on the horizontal plane when a<0.
Scale (x, y): × refers to the width of the box change, y refers to the box height changes, 0-1 boxes shrink, the >1 box becomes larger.
Skew (x, y): Flips x degrees along the x axis and flips y degrees along the y-axis.
Matrix (): All 2D conversion methods can be integrated, including six parameters: A,b,c,d,e,f.
Transform: Belongs to the CSS property, the above method belongs to the value of this property.
div{
Transform:rorate (30deg);}
The transition of CSS3:
transition:width 1s linear 2s;
Four properties: To use the transition properties, the transition time, the linear alignment of the transition, and the time the transition effect begins. \

CSS3 Animations:

Setting definition Animations
From~to
@keyframes myfirst{from {background:red;} to {Background:yellow;} }
0%~100%

@keyframes myfirst{0%   {background:red;} 25%  {background:yellow;} 50%  {background:blue;} 100% {background:green;}}

Binding animations:
Div{animation:myfirst 5s;-moz-animation:myfirst 5s;  /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; / * Opera */}

Animation:myfirst 5s linear 2s infinite alternate;
Several properties commonly used: 1, animation name, 2, animation cycle time, 3, animation speed curve, 4, animation start time, 5, number of plays,

CSS3 3D and 2D