CSS3 2D conversion
May 04, 2021 CSS3
Table of contents
CSS3 2D conversion
CSS3 conversion
CSS3 conversion, we can move, scale, in turn, rotate, and stretch elements.
Next you'll learn about CSS3 2D conversion, and when you learn a new lesson, it's a good idea to do it yourself and click below the code
Give it a tryAllows you to really master this knowledge!
How does it work?
The effect of a transformation that allows an element to change shape, size, and position.
You can convert elements that you use in 2D or 3D.
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
| Attributes | |||||
|---|---|---|---|---|---|
| transform |
36.0
4.0 -webkit- |
10.0
9.0 -ms- |
16.0
3.5 -moz- |
3.2 -webkit- |
23.0
15.0 -webkit- 12.1 10.5 -o- |
|
transform-origin
(two-value syntax) |
36.0
4.0 -webkit- |
10.0
9.0 -ms- |
16.0
3.5 -moz- |
3.2 -webkit- |
23.0
15.0 -webkit- 12.1 10.5 -o- |
Internet Explorer 10, Firefox, and Opera support transform properties.
Chrome and Safari require prefix -webkit-version.
Note: Internet Explorer 9 requires the prefix -ms-version.
2D conversion
In this chapter you'll learn about 2D transformation methods:
-
translate()
-
rotate()
-
scale()
-
skew()
-
matrix()
You'll learn about 3D transformation in the next chapter.
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
Try it out . . .
The translate() method
The translate() method, which moves from the current element position based on the parameters given at the left (X-axis) and top (Y-axis) positions.
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
Try it out . . .
The translate value (50px, 100px) is 50 pixels from the left element and 100 pixels from the top.
The rotate() method
The rotate() method, an element that rotates clockwise in a given degree. Negative values are allowed, so the element rotates counterclockwise.
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
Try it out . . .
The rotate value (30deg) element rotates 30 degrees clockwise.
Scale() method
Scale() method, the size of the element increases or decreases, depending on the width (X-axis) and height (Y-axis) parameters:
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}
Try it out . . .
Scale (2,4) transforms to 2 times the original size and 4 times its original size.
Skew() method
Contains two parameter values that represent the angle at which the X and Y axes are tilted, which defaults to 0 if the second argument is empty, and a negative argument that tilts in the opposite direction.
-
skewX(
); I ndicates that only the X-axis (horizontal direction) is tilted. -
skewY( ); I ndicates that only the Y axis (vertical direction) is tilted.
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
Try it out . . .
skew (30deg, 20deg) is an element that tilts 20 degrees and 30 degrees on the X and Y axes.
Matrix() method
The matrix() method and the 2D transformation method are combined into one.
The matrix method has six parameters, including rotation, zoom, move (pan) and tilt functions.
Use the matrix() method to rotate the div element 30 degrees
{
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 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
Try it out . . .
The newly converted property
All conversion properties are listed below:
| Property | Describe | Css |
|---|---|---|
| transform | Elements for 2D or 3D conversion | 3 |
| transform-origin | Allows you to change the location of conversion elements | 3 |
2D conversion method
| Function | Describe |
|---|---|
| matrix( n , n , n , n , n , n ) | Defines a 2D transformation that uses a matrix of six values. |
| translate( x , y ) | Defines a 2D transformation that moves elements along the X and Y axes. |
| translateX( n ) | Defines a 2D transformation that moves elements along the X axis. |
| translateY( n ) | Defines a 2D transformation that moves elements along the Y axis. |
| scale( x , y ) | Defines a 2D zoom transformation that changes the width and height of an element. |
| scaleX( n ) | Defines a 2D zoom transformation that changes the width of the element. |
| scaleY( n ) | Defines a 2D zoom transformation that changes the height of the element. |
| rotate( angle ) | Define 2D rotation and specify the angle in the parameters. |
| skew( x-angle , y-angle ) | Defines a 2D tilt conversion along the X and Y axes. |
| skewX( angle ) | Defines a 2D tilt conversion, along the X-axis. |
| skewY( angle ) | Defines a 2D tilt conversion, along the Y axis. |
Skilled use of CSS3 2D conversion methods, so that you can be at a good time in the design!
CSS3 transform and transform-origin debugging tools
CSS3 transform and transform-origin debugging tools