# CSS3 2D transformation

**CSS3 2D Transformation**

CSS3 Transformation

CSS3 Transformation, we can move, scale, reverse, rotate, and stretch element.

**How does it work?**

The transformation effect allows an element to change its shape, size and position.

You can convert your elements using 2D or 3D.

**2D Transformation**

In this chapter you will learn about 2D transformation methods:

translate()

rotate()

scale()

skew()

matrix()

**Example**

php中文网(php.cn) Hello

Running program Try the

translate() method

translate() method, based on the parameters given by the left (X-axis) and top (Y-axis) positions, from the current element Position moves.

**Example**

php中文网(php.cn) 这是一个div元素Hello. 这也是一个div元素

Run the program and try it

Tips: translate value ( 50px, 100px) is moving the element 50 pixels from the left and 100 pixels from the top.

**rotate() method**

rotate() method, rotates an element clockwise by a given degree. Negative values are allowed, which rotates the element counterclockwise.

php中文网(php.cn) 你好。这是一个 DIV 元素。你好。这是一个 DIV 元素。

Tips: The rotate value (30deg) element rotates 30 degrees clockwise.

Run the program and try it

**scale() method**

scale() method, the element increases or The reduced size depends on the width (X-axis) and height (Y-axis) parameters:

Hello. This is a DIV element.Hello. This is a DIV element.

Tips: scale(2,4) transforms the width to 2 times the original size , and a height 4 times its original size.

Run the program and try it

**skew() method**

skew() method, the element will be Horizontal (X-axis) and vertical (Y-axis) line parameters give angles:

**Example**

php中文网(php.cn) Hello. This is a DIV element.Hello. This is a DIV element.

Tips: skew(30deg,20deg) is an element that is 20 degrees and 30 degrees around the X-axis and Y-axis.

Run the program and try it

**matrix() method**

matrix() method and 2D transformation method are merged into one.

The matrix method has six parameters, including rotation, scaling, movement (translation) and tilt functions.

**Example**

Use the matrix() method to rotate the div element 30°

php中文网(php.cn) Hello. This is a DIV element.Hello. This is a DIV element.

Run the program and try it

**New transformation properties**

All transformation properties are listed below:

Property | Description | CSS |
---|---|---|

transform | Elements suitable for 2D or 3D transformation | 3 |

transform-origin | Allows you to change the transform element position | 3 |

**2D Conversion Method**

Function | Description |
---|---|

matrix(n,n,n,n,n,n) |
Define 2D transformation, using a matrix of six values. |

translate(x,y) |
Define a 2D transform that moves elements along the X and Y axes. |

translateX(n) |
Define a 2D transformation that moves elements along the X-axis. |

translateY(n) |
Define a 2D transformation that moves elements along the Y axis. |

scale(x,y) |
Define a 2D scaling transformation that changes the width and height of an element. |

scaleX(n) |
Define a 2D scaling transformation that changes the width of an element. |

scaleY(n) |
Define 2D scaling transformation to change the height of the element. |

rotate(angle) |
Define 2D rotation, specify the angle in the parameter. |

skew(x-angle,y-angle) |
Define 2D skew transformation, along X and Y axis. |

skewX(angle) |
Defines a 2D skew transformation, along the X-axis. |

skewY(angle) |
Defines a 2D skew transformation, along the Y axis. |

##