2D Transform in CSS

Transform in CSS are properties used to transform the original elements, allowing us to change position, shape or rotate elements in dimensions.

Transform in CSS are attributes used to "transform" the original elements, allowing us to change position, shape or rotate elements in dimensions.

There are two common types: 2D and 3D transformation.

( Transformation is a generic method of changing the shape, size and position of an element).

In this article, TipsMake.com will work with you to learn about 2D Transform, values ​​and usage as well as the most specific examples for you to easily visualize.

main content

  1. 2D Transform
  2. Transform translate ()
  3. Đang chuyển đổi chuyển đổi ()
  4. Transform scale ()
  5. Transform skewX ()
  6. Transform skewY ()
  7. Transform skew ()
  8. Transform matrix ()

What is 2D Transform?

2D Transform are properties used to handle 2D moving effects.

The syntax for creating transforms is as follows:

 transform: value;

The commonly used values ​​are translate (), rotate (), scale (), skewX (), skewY (), matrix (). As follows:

Value Description translate (x, y) Move element by x-axis and y-axis translateX (n) Move element by x-axis translateY (n) Move element by y-scale axis (x, y) Change width and height of the scaleX element (n) Change the width of the scaleY element (n) Change the height of the element rotate (angle) Rotate the element in an angle (skew) skew (x-angle, y -angle) Format element tilted by an angle skewX (angle) Element format tilted by an angle x axis x skewY (angle) The element format is tilted by an angle along the y matrix axis (n, n, n, n, n , n) Combine scale, skew and translate

Transform translate ()

Picture 1 of 2D Transform in CSS

Translate () moves an element from its current position to the given parameters in the X axis and Y axis. X is translated horizontally and Y is vertically translated.

Example : Move element

to 100 pixels right, back down to less than 50 pixels from the current position

 div { 
  -ms-transform: translate(100px,50px); /* IE 9 */ 
  -webkit-transform: translate(100px,50px); /* Safari */ 
  transform: translate(100px,50px); 
 }

Original image:

Picture 2 of 2D Transform in CSS

(* The examples in the article are all transformed from this image)

Image has been moved:

Picture 3 of 2D Transform in CSS








Website TipsMake.com





Đang chuyển đổi chuyển đổi ()

Picture 4 of 2D Transform in CSS

Rotate () in Transform CSS used to rotate an element clockwise or counterclockwise at a certain angle, the unit used is degree (deg). The positive angle rotates in a clockwise direction, and the angle is negative.

Example : Rotate element

clockwise 20 deg:

 div { 
  -ms-transform: rotate(20deg); /* IE 9 */ 
  -webkit-transform: rotate(20deg); /* Safari */ 
  transform: rotate(20deg); 
 }

Picture 5 of 2D Transform in CSS

Full code:









Website TipsMake.com





Website TipsMake.com





Transform scale ()

Picture 6 of 2D Transform in CSS

Scale () used to change the width and height of the element. Understand simply that you can zoom the element up or down arbitrarily, with x being the horizontal zoom and y being the vertical zoom. Scale has no units that are scaled to the root element, for example, 1 is left intact and doubled, 3 is 3 .

Example: Increase element

Twice the width and three times its original height

 div { 
  -ms-transform: scale(1.5,2); /* IE 9 */ 
  -webkit-transform: scale(1.5,2); /* Safari */ 
  transform: scale(1.5,2); 
 }

Picture 7 of 2D Transform in CSS

Full code:









Website TipsMake.com





Website TipsMake.com





Transform skewX ()

SkewX () tilts an element along the X axis with the transmission angle.

Example: Tilt element

30 degrees on the X axis:

 div { 
  -ms-transform: skewX(30deg); /* IE 9 */ 
  -webkit-transform: skewX(30deg); /* Safari */ 
  transform: skewX(30deg); 
 }

skewX (30deg)

Picture 8 of 2D Transform in CSS
skewX (-30deg)
Picture 9 of 2D Transform in CSS

Transform skewY ()

SkewY () tilts an element along the Y axis with the transmission angle.

Example: Tilt element

30 degrees on the Y axis:

 div { 
  -ms-transform: skewY(30deg); /* IE 9 */ 
  -webkit-transform: skewY(30deg); /* Safari */ 
  transform: skewY(30deg); 
 }

skewY (30deg)

Picture 10 of 2D Transform in CSS
skewY (-30deg)
Picture 11 of 2D Transform in CSS

Transform skew ()

Skew () is a combination of both skewX and skewY, tilting an element by both the X and Y axes with the input angle.

Example: Tilt element

30 degrees on the X axis and 10 degrees on the Y axis.

 div { 
  -ms-transform: skew(30deg, 10deg); /* IE 9 */ 
  -webkit-transform: skew(30deg, 10deg); /* Safari */ 
  transform: skew(30deg, 10deg); 
 }

Picture 12 of 2D Transform in CSS

Full code:








Website TipsMake.com





If the second parameter in skew () is not specified, the program will automatically understand that number is x and y will have a value of 0. So the following example will tilt the element

20 degrees according to the X axis:
 div { 
  -ms-transform: skew(20deg); /* IE 9 */ 
  -webkit-transform: skew(20deg); /* Safari */ 
  transform: skew(20deg); 
 }

Transform matrix ()

Picture 13 of 2D Transform in CSS

Matrix () is a combination of all methods 2D Transform, synthesis of scale, skew and translate. Matrix () has six parameters, containing functions that allow you to rotate, zoom and move elements.

Syntax of matrix:

 matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

For example:

 div { 
 -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */ 
 -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ 
 transform: matrix(1, -0.3, 0, 1, 0, 0); 
 }

Previous lesson: Using Web Font in CSS

Next lesson: 3D Transform in CSS

Update 25 May 2019
Transform csstranslate in cssrotate in cssscale in cssskewmatrix in csstransform values ​​in csshow to use transform css

You should read it

Maybe you are interested

Category

System

Mac OS X

Hardware

Game

Tech info

Technology

Science

Life

Application

Electric

Program

Mobile