Css3:transform and Transform-origin attributes can make the element style change

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