Conversion
In this chapter, you will learn the following 2D conversion methods:
- Translate ()
- Rotate ()
- Scale ()
- Skew ()
- Matrix ()
You will learn the 3D conversion in the next chapter.
Instance
Div{transform:rotate (30deg);-ms-transform:rotate (30deg); /* IE 9 */-webkit-transform:rotate (30deg); /* Safari and Chrome */-o-transform:rotate (30deg); /* Opera */-moz-transform:rotate (30deg); / * Firefox */}
Try it yourself.
Translate () method
With the translate () method, the element moves from its current position, based on the given left (x-coordinate) and top (y-coordinate) positional parameters:
Instance
Div{transform:translate (50px,100px);-ms-transform:translate (50px,100px); /* IE 9 */-webkit-transform:translate (50px,100px); /* Safari and Chrome */-o-transform:translate (50px,100px); /* Opera */-moz-transform:translate (50px,100px); / * Firefox */}
Try it yourself.
The value translate (50px,100px) moves the element from the left to 50 pixels, moving 100 pixels from the top.
Rotate () method
The element rotates the given angle clockwise by the rotate () method. Negative values are allowed, and the elements rotate counterclockwise.
Instance
Div{transform:rotate (30deg);-ms-transform:rotate (30deg); /* IE 9 */-webkit-transform:rotate (30deg); /* Safari and Chrome */-o-transform:rotate (30deg); /* Opera */-moz-transform:rotate (30deg); / * Firefox */}
Try it yourself.
The value rotate (30deg) Rotates the element clockwise by 30 degrees.
Scale () method
With the scale () method, the dimensions of the element are increased or decreased, depending on the given width (X-axis) and height (Y-axis) Parameters:
Instance
Div{transform:scale (2,4);-ms-transform:scale (2,4); /* IE 9 */-webkit-transform:scale (2,4); / * Safari and Chrome */-o-transform:scale (2,4); /* Opera */-moz-transform:scale (2,4); / * Firefox */}
Try it yourself.
The value scale (2,4) converts the width to twice times the original size and converts the height to 4 times times the original height.
Skew () method
By the skew () method, the element flips the given angle, according to the given horizontal line (X axis) and vertical (Y-axis) Parameters:
Instance
Div{transform:skew (30deg,20deg);-ms-transform:skew (30deg,20deg); /* IE 9 */-webkit-transform:skew (30deg,20deg); /* Safari and Chrome */-o-transform:skew (30DEG,20DEG); /* Opera */-moz-transform:skew (30deg,20deg); / * Firefox */}
Try it yourself.
The value skew (30deg,20deg) flips the element around the X-axis by 30 degrees and flips 20 degrees around the Y-axis.
Matrix () method
The matrix () method combines all 2D conversion methods.
The matrix () method requires six parameters, including mathematical functions that allow you to: rotate, scale, move, and skew elements.
Instance
How to use the matrix method to rotate a DIV element 30 degrees:
Div{transform:matrix (0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix (0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-moz-transform:matrix (0.866,0.5,-0.5,0.866,0,0); /* Firefox */-webkit-transform:matrix (0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */-o-transform:matrix (0.866,0.5,-0.5,0.866,0,0); / * Opera */}
Try it yourself.
New Transformation Properties
The following table lists all the conversion properties:
Properties |
Description |
CSS |
Transform |
Applies a 2D or 3D conversion to an element. |
3 |
Transform-origin |
Allows you to change the position of the element being converted. |
3 |
function |
description |
Matrix ( n , n , n , n , n , n ) |
defines a 2D conversion, using a matrix of six values. |
Translate ( x , y ) |
to define 2D transformations, moving elements along the x and Y axes. |
TranslateX ( n ) |
defines the 2D transformation, moving elements along the X-axis. |
translatey ( n ) |
defines the 2D transformation, moving elements along the Y axis. |
Scale ( x , y ) |
defines the 2D scaling transformation, changing the width and height of the element. |
ScaleX ( n ) |
defines the 2D scaling transformation, changing the width of the element. |
ScaleY ( n ) |
defines the 2D scaling transformation, changing the height of the element. |
rotate ( angle ) |
defines the 2D rotation, which specifies the angle in the parameter. |
skew ( x-angle , y-angle ) |
defines a 2D tilt transition along the x and Y axes. |
skewx ( angle ) |
defines a 2D tilt transition along the X-axis. |
skewy ( angle ) |
defines a 2D tilt transition along the Y-axis. |
CSS3 2D Conversion