CSS3 2D conversion


May 04, 2021 03:00 CSS3


Table of contents


CSS3 2D conversion


CSS3 conversion

CSS3 conversion, we can move, scale, in turn, rotate, and stretch elements.

CSS3 2D conversion

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 try

Allows 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.

属性
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.

CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

Try it out . . .



The translate() method

CSS3 2D conversion

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.

CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion
div
{
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

CSS3 2D conversion

The rotate() method, an element that rotates clockwise in a given degree. Negative values are allowed, so the element rotates counterclockwise.

CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion
div
{
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

CSS3 2D conversion

Scale() method, the size of the element increases or decreases, depending on the width (X-axis) and height (Y-axis) parameters:

CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion
div
{
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.

CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion
div
{
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

CSS3 2D conversion

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.

CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion CSS3 2D conversion

Use the matrix() method to rotate the 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 */
-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


CSS3 2D conversion