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:

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.