The transform of the css3 animation attribute series describes rotating rotate and css3rotate in detail.
1. Syntax:
Transform: none | <transform-function> [<transform-function>] *
2. values:
- None ---- Do not change
- <Transform-function> ---- one or more transformation functions,SpaceSeparate
It can be used for inline and block-level elements to achieve rotation, scaling, movement, and other effects. The details are as follows:
Java code
- /*
- Rotate (<angle>)
- Specify a 2D rotation for the element through the specified angle
- You must first define the transform-origin attribute.
- Transform-origin is the basis of rotation
- Angle is the rotation angle, positive value indicates clockwise, negative value indicates clockwise
- Deg indicates the degree. For example, 60deg indicates 60 degrees.
- */
- # Test {
- Transform: rotate (60deg); // w3c Standard
- -Webkit-transform: rotate (60deg); // safari and chrome of the webkit Kernel
- -Moz-transform: rotate (60deg); // ff
- -O-transform: rotate (60deg); // opera
- -Ms-transform: rotate (60deg); // IE9
- }
How can I move and rotate one side of a CSS3 animation?
You have not set any code here to let him rotate, and it will certainly not rotate.
-Webkit-transform: rotate (720deg) scale (2, 2 );
@ Keyframes mylasting1
{
0% {top: 550px;-webkit-transform: rotate (10deg) scale (); transform: rotate (720deg) scale );}
25% {top: 250px; left: 100px;-webkit-transform: rotate (80deg) scale (); transform: rotate (720deg) scale );}
50% {top: 150px; left: 50px;-webkit-transform: rotate (160deg) scale (); transform: rotate (720deg) scale );}
100% {top: 0px; left: 0px;-webkit-transform: rotate (320deg) scale (); transform: rotate (720deg) scale );}
}
@-Webkit-keyframes mylasting1
{
0% {top: 550px;-webkit-transform: rotate (10deg) scale );}
25% {top: 250px; left: 100px;-webkit-transform: rotate (80deg) scale );}
50% {top: 150px; left: 50px;-webkit-transform: rotate (160deg) scale );}
100% {top: 0px; left: 0px;-webkit-transform: rotate (320deg) scale );}
}
How does css3 set a specific transform attribute?
Multiple transforms of one element
Like this:
-Webkit-transform: rotate (360deg) scale (2 );
You can also add translate (1em, 0) before the semicolon and separate them with spaces.
Dora A dream's Transform
Transform in Dora A dream's CSS only uses rotate
For example, in # head_light
-Webkit-transform: rotate (20deg );
-Moz-transform: rotate (20deg );
-O-transform: rotate (20deg );
-O-transform should be effective for Opera.