Css3:transform is used for the transformation of element styles, such as displacement of elements, angular changes, small stretching, skew at a specified angletransform combined with transition for various animation effects
Transform:
Transform compatible browsers are written as follows:
1 Transform:/* Change Style*/;2 -ms-transform:/* Change Style*/; /*IE 9*/3 -webkit-transform:/* Change Style*/; /*Safari and Chrome*/4 -o-transform:/* Change Style*/; /*Opera*/5 -moz-transform:/* Change Style*/; /*Firefox*/
The following styles can be changed:
1. Move the element position: translate, Syntax: translate (x-coordinate, y-coordinate)
1 transform:translate (50px,100px);2 -ms-transform:translate (50px,100px); /*IE 9*/3 -webkit-transform:translate (50px,100px); /*Safari and Chrome*/4 -o-transform:translate (50px,100px); /*Opera*/5 -moz-transform:translate (50px,100px); /*Firefox*/
The above code moves the element position horizontally 50 pixels, moving vertically 100 pixels
2. How many degrees the element rotates at the specified angle: rotate, Syntax: rotate (angle value deg)
1 transform:rotate (30deg);2 -ms-transform:rotate (30deg); /*IE 9*/3 -webkit-transform:rotate (30deg); /*Safari and Chrome*/4 -o-transform:rotate (30deg); /*Opera*/5 -moz-transform:rotate (30deg); /*Firefox*/
The above code rotates the element clockwise by 30 degrees, and if the value is negative, it is rotated counterclockwise
3. The element is stretched or shrunk by a specified multiple, and the font is stretched or shrunk at the same time: scale, Syntax: Scale (X-axis multiple, y-axis multiple)
1 Transform:scale (2,4);2 -ms-transform:scale (2,4); /*IE 9*/3 -webkit-transform:scale (2,4); /*Safari and Chrome*/4 -o-transform:scale (2,4); /*Opera*/5 -moz-transform:scale (2,4); /*Firefox*/
The above code causes the width of the element to stretch twice times and the height to stretch 4 times times
4, the element skew given angle: skew, Syntax: Skew (x-axis angle value deg,y axis angle value deg)
1 Transform:skew (30deg,20deg);2 -ms-transform:skew (30DEG,20DEG); /*IE 9*/3 -webkit-transform:skew (30DEG,20DEG); /*Safari and Chrome*/4 -o-transform:skew (30DEG,20DEG); /*Opera*/5 -moz-transform:skew (30DEG,20DEG); /*Firefox*/
Transform-origin:
The transform-origin is used to set the base point position of the rotated element, compatible syntax:
1 Transform-origin:/*Location Settings*/;2 -ms-transform-origin:/*Location Settings*/;3 -webkit-transform-origin:/*Location Settings*/;4 -moz-transform-origin:/*Location Settings*/;5 -o-transform-origin:/*Location Settings*/;
Location settings, divided into three settings, syntax:
1 Transform-origin:x-axis y-axis z-axis;
X-axis:x Axis Position
Y-axis:y Axis Position
Z-axis:z Axis Position
The location can be a specific value, percent, left, right, center
Numerical Examples:
1 transform-origin:0 ;
Examples of percentages:
1 transform-origin:20% 40%;
Default Value setting:
1 Transform-origin:left Center;
Css3:transform and Transform-origin attributes can make the element style change