What Is 2D Transform: 2D Transform in CSS

What Is 2D Transform: 2D Transform in CSS is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

 transform: value; 

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

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

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); 
 } 

Full code:

Website TipsMake.com

Website TipsMake.com

Transform scale ()

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, As an 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); 
 } 

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) skewX (-30deg)

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) skewY (-30deg)

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); 
 } 

Full code:

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 example below will tilt the element

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

Transform matrix ()

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()) 

As an 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