css2d rotation

css2d rotation

table of Contents

translate()

rotate()

scale()

skew()

matrix()

 

1. translate () method

   By translate () method, the element from its current position, (y-coordinate) position parameters (x-coordinate) and the given top left. Examples are as follows:

   div
   {
   transform: translate(50px,100px);
   -ms-transform: translate(50px,100px);		/* IE 9 */
   -webkit-transform: translate(50px,100px);	/* Safari and Chrome */
   -o-transform: translate(50px,100px);		/* Opera */
   -moz-transform: translate(50px,100px);		/* Firefox */
   }

   Value translate (50px, 100px) moves the element from the left 50 pixels, 100 pixels from the top of the mobile.

2. rotate () method

   () Is rotated a given angle by a rotate method, element clockwise. Allow negative element rotates counterclockwise.

   Examples

   div
   {
   transform: rotate(30deg);
   -ms-transform: rotate(30deg);		/* IE 9 */
   -webkit-transform: rotate(30deg);	/* Safari and Chrome */
   -o-transform: rotate(30deg);		/* Opera */
   -moz-transform: rotate(30deg);		/* Firefox */
   }

   Value rotate (30deg) of the rotating element 30 clockwise.

3. scale () method

   By scale () method, the size of the element can increase or decrease the parameter (Y-axis) according to a given width (X-axis) and height:

   Examples

   div
   {
   transform: scale(2,4);
   -ms-transform: scale(2,4);	/* IE 9 */
   -webkit-transform: scale(2,4);	/* Safari 和 Chrome */
   -o-transform: scale(2,4);	/* Opera */
   -moz-transform: scale(2,4);	/* Firefox */
   }

   Value scale (2,4) to convert a width of 2 times the original size, the height is converted to four times the original height.

4. skew () method

   By skew () method, flip element given angle, according to a given horizontal line (X-axis) and vertical lines (Y-axis) parameters:

   Examples

   div
   {
   transform: skew(30deg,20deg);
   -ms-transform: skew(30deg,20deg);	/* IE 9 */
   -webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */
   -o-transform: skew(30deg,20deg);	/* Opera */
   -moz-transform: skew(30deg,20deg);	/* Firefox */
   }

   Value skew (30deg, 20deg) the elements flipped 30 degrees, 20 degrees about the Y axis inverted around the X axis.

5. matrix () method

   matrix () method to combine all the 2D conversion method.

   matrix () method requires six parameters including math functions that allow you to: rotate, zoom, and tilt the mobile element.

   Examples

   How to use the matrix method will rotate 30 degrees div element:

   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 */
   -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */
   -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */
   -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* Opera */
   }

    

6. The new conversion property

   Attributes	description	CSS
   transform	2D or 3D conversion application to the elements.	3
   transform-origin	It allows you to change the position of the element to be converted.	3

7. 2D Transform method

   function	description
   matrix(n,n,n,n,n,n)	The definition 2D conversion, using a matrix of six values.
   translate(x,y)	2D conversion is defined along the X and Y-axis moving element.
   translateX(n)	2D conversion is defined along the X-axis moving element.
   translateY(n)	2D conversion is defined, the element moves along the Y axis.
   stairs ( x , y )	Defined 2D scale transformation, changing the width and height of the element.
   scaleX(n)	Defined 2D scale transformation, changing the width of the element.
   scaleY(n)	The definition 2D scale transformation, changing the height of the element.
   rotate(angle)	2D rotation is defined, in a predetermined angle parameter.
   skew(x-angle,y-angle)	2D skew transformation is defined along the X and Y axes.
   skewX(angle)	2D skew transformation is defined, along the X axis.
   skewY(angle)	2D skew transformation is defined, along the Y axis.