The skill of using the functions of 2D tansform in CSS3

Article Introduction: The CSS3 2D transform gives web designers more freedom to decorate and distort HTML components. At the same time let the designer have more features to decorate the text and more animation options to decorate the div element. Some basic functions included in the CSS3 2D deformation are as follows.

In a two-dimensional or three-dimensional space, elements can be distorted, shifted, or rotated. Only 2D deformations work on the x-axis and the y-axis, which is commonly said to be the horizontal and vertical axes, while 3D deformations work on the x-axis and the y-axis, as well as a Z axis. These 3D transformations can define not only the length and width of the element, but also the depth. We'll start with a discussion of how elements are transformed in the 2D plane, and then we're going into the 3D transformation.

The CSS3 2D transform gives web designers more freedom to decorate and distort HTML components. At the same time let the designer have more features to decorate the text and more animation options to decorate the div element. Some basic functions included in the CSS3 2D deformation are as follows.

Displacement translate () function

Don't get me wrong, translate doesn't mean translating foreign languages, where translate is a way to move elements in a specified direction, similar to the one position in relative . It can be simply understood that, using translate() functions, you can move elements from the original position without affecting any component on the x or Y axis.

The use syntax for the translate () function is as follows:

 
Or
 
 
translate()The function can take a value of TX or two values TX and Ty at the same time, and the value is specified as follows:
 
 
  

  
   
 
    
TX is a vector length that represents the x-axis movement, and when the value is positive, the element moves to the right of the x-axis, whereas its value is negative, and the element moves to the left direction of the x-axis.
 
    
Ty is a vector length that represents the y-axis (portrait) movement, and when its value is positive, the element moves in the direction of the y-axis, and when its value is negative, the element moves toward the y-axis. If Ty does not have an explicit setting, it is equivalent to ty=0.
 
   
 
  
 
 
In combination, the translate() function move element has the following three kinds of movement mainly:
 
 
  

  
   
 
    
Horizontal movement: Move to translate(tx,0) the right and move to the left translate(-tx,0) ;
 
    
Vertical movement: Move up translate(0,-ty) and down translate(0,ty) ;
 
    
Move diagonally: The lower right corner moves translate(tx,ty) , the top right corner moves translate(tx,-ty) , the upper left corner moves, translate(-tx,-ty) and the lower left corner moves translate(-tx,ty) .
 
   
 
  
 
Now let's take a look translate() at some simple examples of functions. We use to transform:translate(tx,ty) move an object from its original position, where the TX value is positive and the Ty value equals 0 o'clock, and the image is moved to the right:
 

Html
 

     
 
     
		
 
Css
 
div {     width: 500px;     height: 300px;     margin: 30px auto;     position: relative;     background: url(images/bg-grid.jpg) no-repeat center center;     background-size: 100% 100%; }  //默认图片都在容器中水平垂直居中 div img {     position: absolute;     top: 50%;     left: 50%;     margin-left: -35px;     margin-top: -50px;  } div img:nth-child(1){     opacity: .5;     z-index: 1; } div img:nth-child(2){     opacity: 1;     z-index: 2;     
 
The effect is shown in the following illustration:
 
 
In this example, we let the poker club King move 100 pixels to the right relative to the center of the original point. If you just want the element to move to the right, we can omit the Ty value. In other words, the Ty value of 0 can be omitted without writing. In this way, the above effect equals:
 
div
			img:nth-child(2){     opacity:
									1;
					z-index:
									2;
					transform:
									translate(100px);
					}
		
 
To move an object to the left, we only need to enter the x-coordinate of a negative number, and the Y coordinate should remain 0, based on the previous example, we move the poker to the left by 100 pixels:
 
div
			img:nth-child(2){     transform:
									translate(-100px,0);
					}
		
 
The effect is shown in the following illustration:
 
 
Moving a single object vertically is as simple as moving the object almost horizontally. The only difference is that we will use the value of the y-axis to control the movement of the object up and down. As we mentioned earlier, when the coordinate value of the y-axis is positive, the image moves downward, and when its coordinate value is negative, the object moves up. The coordinate value of the x-axis should be kept at 0. Let's look at a simple example that moves a poker up and down by 100 pixels:
 
div
			img:nth-child(1){     opacity: .5;
					z-index:
									1;
					}
			div
			img:nth-child(2){     z-index:
									2;
					transform:
									translate(0,-100px);
					}
			div
			img:nth-child(3){     z-index:
									3;
					transform:
									translate(0,100px);
					}
		
 
The effect is shown in the following illustration:
 
 
To allow an element to move diagonally, my sample will combine the values of the X and Y axes two coordinates. The values of the X and Y axes may be positive or negative, depending on the direction. If we want to move a poker card to the right, we need to set the x-axis coordinates to positive. Set the y-axis to a negative value, and if you want to move a card to the lower right, you need to set the x, y axis coordinates to positive, and if you want to move the top left corner of a poker, you need to set the x, y axis coordinates to a negative value If you want to move the poker racket to the lower left, you need to set the X coordinate to a negative value and the Y coordinate to a positive value.
 
div
			img:nth-child(1){     opacity: .5;
					z-index:
									1;
					}
			div
			img:nth-child(2){     z-index:
									2;
					transform:
									translate(100px,-100px);
					}
			div
			img:nth-child(3){     z-index:
									3;
					transform:
									translate(100px,100px);
					}
			div
			img:nth-child(4){     z-index:
									3;
					transform:
									translate(-100px,-100px);
					}
			div
			img:nth-child(5){     z-index:
									3;
					transform:
									translate(-100px,100px);
					}
		
 
The effect is as follows:
 
 
If we want to move objects in one direction, such as moving along the horizontal axis or the longitudinal axis, we can actually use translate(tx,0) and translate(0,ty) implement them. In fact, it provides an easier way to move objects in a single direction in the transformation:
 

        

 
         
 
          
Translatex (): Moves one object horizontally. Specifies the displacement of an object along the horizontal axis by giving a numeric value in the direction of the x-axis. To put it simply, the image is moved to the x-axis only, and if the value is positive, the image is moved to the right, and if the value is negative, the image moves to the left.
 
          
Translatey (): Moves an object in the direction of the vertical axis. Specifies the displacement of an object along the longitudinal axis by giving a value in the direction of the Y axis. Simply put, the object moves only to the y-axis, and if the value is positive, the object moves downward and the image moves upward if the value is negative.
 
         

        
 
The two functions differ from the one described earlier in that translate() each method accepts only a single value. So, transform:translate(-100px,0) actually equals transform:translateX(-100px) ; transform:translate(0,-100px) actually equals transform:translateY(-100px) .
 
Scaling scale () function
The zoom scale () function lets the element scale the object according to the center origin. The default value is 1. So any value between 0.01 and 0.99 makes an element smaller, and any value greater than or equal to 1.01 makes the element appear larger.
scale()the syntax for scaling functions and translate() functions is very similar in that he can accept a value or accept two values at the same time, and if there is only one value, the second value defaults to equal to the first value. For example, the scale(1,1) element does not change, and the scale(2,2) element is magnified twice times along the x-axis and y-axis. Its use syntax is as follows:
Or:
Its value is simply described as follows:
 
  
        
 
   
         
SX: A scaling vector that specifies the direction of the horizontal coordinate (x-axis), if the value is between 0.01~0.99, the object is narrowed in the x-axis direction, and if the value is greater than or equal to 1.01, the object is magnified in the y-axis direction.
 
   
         
SY: The amount of scaling that specifies the direction of the vertical coordinate (y-axis), if the value is 0.01~0.99, the object is narrowed in the y-axis direction, and if the value is greater than or equal to 1.01, the object is magnified in the y-axis direction.
 
  
        
Here's a simple example:

Html
 

           
 
           
		
 
Css
 
div
			{     width:
									500px;
					height:
									500px;
					margin:
									30px auto;
					position: relative;
					background:
									url(images/bg-grid.jpg) no-repeat center center;
					background-size:
									100% 100%;
					}
			div
			img
			{     position: absolute;
					top:
									50%;
					left:
									50%;
					margin-left: -35px;
					margin-top: -50px;
					}
			div
			img:nth-child(1){     opacity: .8;
					z-index:
									2;
					border:
									1px solid red;
					}
			div
			img:nth-child(2){     z-index:
									1;
					transform:
									scale(1.5);
					}
		
 
The effect looks like this:
 
 
The above example magnifies the playing card by 1.5 times times or 150% of the actual size. Because we are both in the direction of the X and Y axes, we only need to declare a value for scale (). You can also use Transform:scale (1.5,1.5) to achieve the same effect.
 
Besides, if we're going to shrink an element, we're going to use a 0~0.9999 value, like the following example, where we scale the poker by half, which is 50% of the actual size.
 
div
			img:nth-child(2){     z-index: ２;
					transform:
									scale(.5);
					}
		
 
The effect looks like this:
 
 
However, be careful, if you set the value to "0", the element will disappear. I think you wouldn't do that if you didn't have to. When we only explicitly set a value for the scale () function, the object is magnified or shrunk in a proportional case. If you need to set the object to a different value in the X and Y axes two direction.
 
div
			img:nth-child(2){     z-index:
									2;
					transform:
									scale(.5,1.2);
					}
		
 
The effect looks like this:
 
 
The scale () function is extremely similar to the translate () function, which allows elements to be scaled only along the x-axis or y-axis, except by using the scale () function to scale both horizontally and vertically (that is, the elements are scaled along both the x-axis and the y-axis):
 

            

 
             
 
              
ScaleX (): Equivalent to scale (sx,1). Indicates that the element is scaled only on the x-axis (horizontally), with a default value of 1.
 
              
ScaleY (): Equivalent to scale (1,SY). Indicates that the element is scaled only in the y-axis (vertical and horizontal direction), and its default value is 1.
 
             

            
 
Through the above introduction, let us not think of graphics editing software in the Zoom tool, the object scaling effect. The scaling tools in the scale () function and graphics editing software in CSS3 are almost the same:
 
 
In the scale () function, the value can be negative, in addition to the positive values that can be taken. When you take a negative value, you first flip the element and then zoom in.
 
Html
 

               
 
                

                 Scale(-1.5)
                
 
               
		
 
Css
 
.wrapper
			{     width:
									500px;
					height:
									400px;
					margin:
									30px auto;
					position: relative;
					background:
									url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;
					}
			.wrapper > div
			{     position: absolute;
					background-color:
									hsla(220,20%,20%,.3);
					top:
									50%;
					left:
									50%;
					margin-left: -100px;
					margin-top: -100px;
					width:
									198px;
					height:
									198px;
					border:
									1px dotted orange;
					text-align: center;
					line-height:
									198px;
					color:
									#fff;
					font-size:
									20px;
					transform:
									scale(-1.5);
					}
		
 
The effect is as follows:
 
 
scale()When a function scales an element, it is based on the center of the element, but it can be used transform-origin to change the base point of the element.
 
Rotate rotate () function
The rotation rotate () function specifies a 2D rotation of the element based on the object origin by the specified angle parameter. It operates mainly in two-dimensional space, accepting an angle value to specify the amplitude of rotation. If this value is positive, the element rotates clockwise relative to the center of the origin, and if this value is negative, the element rotates counterclockwise relative to the center of origin.
The use of the rotate () function is simple, and its basic syntax is as follows:
The rotate () function accepts only one value, and its property value is simply described as follows:
 
  
              
 
   
               
A: Represents a rotational angle value. Its value can be positive, or it can be negative. If the value is positive, the element is rotated clockwise by default relative to the center point of the element, and if the value is negative, the element is rotated counterclockwise by default relative to the element's center point.
 
  
              
Next, let's look at a simple example of a poker that rotates 45 degrees clockwise relative to the center point of the element:

Html
 

                 
 
                 
		
 
Css
 
div
			{     width:
									500px;
					height:
									300px;
					margin:
									30px auto;
					position: relative;
					background:
									url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;
					}
			div
			img
			{     position: absolute;
					top:
									50%;
					left:
									50%;
					margin-left: -70px;
					margin-top: -100px;
					}
			div
			img:nth-child(1){     z-index: １;
					opacity: .6;
					}
			div
			img:nth-child(2){     z-index:
									2;
					transform:
									rotate(45deg);
					}
		
 
The effect looks like this:
 
 
By default, the rotate () function rotates the element relative to the center point of the element, and again, we can reset transform-origin the rotation origin of the element by the property:
 
div
			img:nth-child(2){     z-index:
									2;
					transform-origin: top left;
					transform:
									rotate(45deg);
					}
		
 
Based on the above example, the effect of modifying the rotation origin is completely different:
 
 
The rotate () function can also be understood in contrast to the function of the rotation tool in the graphical editing software. The following illustration shows a comparison between the rotation of the rotate () function in the CSS3 in 2D and the rotation tool in Photoshop production software:
 
 
Tilt skew () function 
The italic skew () function enables the element to be tilted to display. It can tilt an object around the x-axis and the y-axis at a certain angle in its central position. Unlike the rotation of the rotate () function, the rotate () function simply rotates without changing the shape of the element. The skew () function does not rotate, but only changes the shape of the element. The syntax format is as follows:
 
 
Or
 
 
The attribute values are described below:
 
 
                   

  
                    
 
                     
AX: The angle used to specify the horizontal orientation (x axis) of an element to tilt.
 
                     
AY: Used to specify the angle at which the element is tilted vertically (Y-axis direction). If this value is not explicitly set, the default is 0.
 
                    
 
                   
 
Here's a simple example:
 
div
			img:nth-child(1){     z-index: １;
					opacity: .6;
					}
			div
			img:nth-child(2){     z-index:
									2;
					transform:
									skew(30deg,10deg);
					}
		
 
The effect is shown in the following illustration:
 
 
The italic skew () function and the translate (), scale () functions in the CSS3 transform can also use skew () and tx,ty (), in addition to the SKEWX (skewy) function, which allows elements to be in the center of the element as the origin, skewing the x-axis and the y-axis (). function to have the element tilt only in horizontal or vertical direction.
 
 
                    

  
                     
 
                      
SKEWX (): Equivalent to Skew (ax,0) and skew (ax). Specifies an oblique deformation along the x-axis at the given angle. SKEWX () causes the element to be centered at its center and is tilted horizontally (x axis).
 
                      
Skewy (): Equivalent to Skew (0,ay). Specifies an oblique deformation along the y-axis, at the given angle. Skewy () is used to set the element at its center as the base point and the given angle is tilted vertically (Y axis).
 
                     
 
                    
 
By default, the skew () function skews the element with the original center point of the element, but we can also skew the element based on the Transform-origin property and reset the element base. In addition, the skew () function and the Texturing tool in the Mapping Software Act similarly.
 
 

Matrices Matrix () function 
The transform in CSS3 makes it easy to manipulate deformations, such as the displacement translate () function, the zoom scale () function, the rotation rotate () function, and the skew skew () function. These functions are simple and convenient, but matrix function matrices () in the transformation are not often used for us.
 
Of course, web designers can use the rotate (), skew (), scale (), and translate () functions to satisfy their morphing needs, so why bother matrix matrices ()? The transformation functions in CSS3 can be replaced with the matrix () function, for example:
 
Using matrices enables a complex 2D variant, as follows:
 
#object
			{     transform-origin:
									0
									0;
					transform:
									rotate(15deg)
									translateX(230px)
									scale(1.5, 2.6)
									skew(220deg, -150deg)
									translateX(230px) }
		
 
Using a matrix matrices () rule becomes the following:
 
#object
			{     transform-origin:
									0
									0;
					transform:
									matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px) }
		
 
You may hate a lot of numbers in the matrix () function, but in order to understand the matrix () function in the CSS3 transformation, we first need to understand what matrices are all about. Next we'll discuss the matrix in transform.
 
The matrix of deformation in the CSS3 is divided into two kinds, one is the 2D matrix and the other is the 3D matrix. Let's start with a simple--2d matrix.
 
The 2D matrix matrices in CSS3 provide six parameters: A,b,c,d,e and F, and the basic wording is as follows:
 
 
In fact, these six arguments, the corresponding matrices are:
 
 
Before we begin, let's review a simple linear algebra knowledge: Matrix and vector multiplication. Too complicated for us to use, we just need to understand the product of three-dimensional vectors and 3 x 3 matrices:
 
 
After you figure out the matrix of 3x3, you can know the method of matrix calculation. X and y are the coordinates of the original origin of the element, and X ' and Y ' are the new origin coordinates obtained by the matrix transformation. The new coordinates can be obtained by applying a transform to the original coordinates through the middle of the 3x3 transformation matrix. According to the matrix transformation rules can be obtained: X ' =ax+cy+e and y ' =bx+dy+f:
 
 
A bunch of letters above make you look confused, and for a better understanding, let's take a look at a simple example. Suppose the matrix parameters are as follows:
 
transform: matrix(1,0,0,1,50,50);/*a=1,b=0,c=0,d=1,e=50,f=50*/
		
 
Now, we are going to offset the center point of the element based on this matrix, assuming (0,0), that is, x=0,y=0.
 
We can list this as a matrix according to the matrix described above:
 
 
Thus, the transformed Origin position X ' and y ' can be computed according to the calculation rule of the matrix vector:
 
 
That is to calculate the X ' =50,y ' = 50. That is, the origin of the element is moved by (0,0) to the position of (50,50). In fact Transform:matrix (1,0,0,1,50,50), just as Transform:translate (50px,50px).
 

Html
 

                           
 
                           
			
                           
 
                           
		
 
Css
 
.matrix
			img:nth-child(2){     z-index:
									2;
					transform:
									matrix(1,0,0,1,50,50);
					}
			.translate
			img:nth-child(2){     z-index:
									2;
					transform:
									translate(50px,50px);
					}
		
 
The effect looks like this:
 
 
Some basic knowledge of matrix is introduced, and the displacement effect of translate () is realized by a simple example using matrix () function. Next we look at the relationship between the matrix () and the deformation functions in the CSS3 deformation.
 
Translate () converted to matrix ()
 
First look at the simplest displacement translate () function. We all know that the basic meaning of Transform:translate (tx,ty) is to translate the display position of an element tx,ty. In matrix deformation, the translate's matrix parameters are:
 
matrix(1,0,0,1,tx,ty)/*tx,ty分别对应X和Y轴的增量*/
		
 
Its corresponding matrix diagram:
 
 
This formula shows that: Transform:translate (100px,100px), which corresponds to Transform:matrix (1,0,0,1,100,100), calculated results: X ' =x+tx=x+100;y ' =y+ty=y+ 100.
 
Scale () converted to matrix ()
 
Transform:scale (Sx,sy) scales an element by a specified multiple, and its corresponding matrix is:
 
matrix(sx*x,0,0,sy*y,0,0);/*sx和sy分别对应X轴和Y轴的缩放比率*/
		
 
Its corresponding matrix diagram:
 
 
This formula shows: Transform:scale (1.5,1.5) and corresponding to Transform:matrix (1.5,0,01.5,0,0), calculated results: x’=x*sx=1.5*x ; y’=y*sy=1.5*y .
 
Rotate () converted to matrix ()
 
Transform:rotate (a) rotates an element at a specified angle, and its corresponding matrix is:
 
　matrix(cos(a),sin(a),-sin(a),cos(a),0,0)；/*cos(a)和sin(a)是指旋转度转*/
		
 
 
The formula is as follows: Transform:rotate (45DEG) and corresponding to Transform:matrix (0.53,0.85,-0.85,0.53,0,0); [Sin (=0.85,cos) (45 ') =0.53]. The calculated result: x’=cos(a) x – sin(a)*y=cos(45)*x – sin(45)*y ; y’=sin(a)*x + cos(a)*y = sin(45)*x + cos(45)*y .
 
Skew () converted to matrix ()
 
Transform:skew (Ax,ay) tilts an element at a specified angle on the x-axis and y-axis, and its corresponding matrix is:
 
matrix(1,tan(ay),tan(ax),1,0,0)/*tan(ax)和tan(ay)是对应的倾斜角度*/
		
 
Its corresponding matrix diagram:
 
 
The formula shows that: Transform:skew (45deg) corresponds to Transform:matrix (1,0,1,1,0,0), where Tan (45 ') = 1. The calculated result: x’=x + tan(a)*y ; y’=tan(a)*x + y .
 
The above shows the common deformation and matrix in CSS3, in addition to the above demo, there are some others. The following diagram is the graph of all CSS3 transformations and matrix equivalence:
 
 
Matrix () Implements mirroring
 
In the graphics software, in addition to rotation, tilt, displacement, scaling and so on, there are mirrors (horizontal mirror, vertical mirror):
 
 
However, mirror symmetry has no corresponding simplification in CSS3 deformation. Can only be achieved through matrix matrices (). As we know from the foregoing, it is clear that the origin of the element deformation is its center point (outside of the explicit reset), then the original point of the mirror is no exception. Because the axis passes through the origin forever, any axis of symmetry can be represented by a y=k*x line. The matrix representation is:
 
 
How does this get? Let's take a look at the implementation process. As shown in the following figure, the coordinates of the point (X ', y ') are already y=k*x and know the point (x,y):
 
 
Very simple, one is perpendicular, the second is the center point on the axis, so there are:
 
(y-y") / (x - x") = -1/ k     →       ky-ky" = -x+x" (x + x") / 2 * k = y + y"     →       
 
Very simply, put X ' and Y ' forward, there are:
 
 
And then combine the matrix formula:
 
 
We can get:
 
a = (1-k^2)/(k^2+1);
			b = 2k/(k^2+1);
			c = 2k/(k^2+1);
			d = (k^2-1)/(k^2+1);
		
 
Which is the value of the parameter in the matrix above.
 
CSS3 2D ttransform compatibility 
 CSS3 2D variants have been well supported in mainstream browsers so far. The 2D transformation of CSS3 is supported by many mainstream browsers, but it needs to be added to the browser's private properties when it is actually used: 
 When using 2D variants in the 
 
                                   
 
  
                                    
 IE9, you need to add-ms-private properties and support the standard version at the ie10+ version. The 
 
  
                                    
 Firefox3.5 to Firefox15.0 version requires the addition of a private property of-moz-, which supports the standard version at the beginning of the firefox16+ version. The 
 
  
                                    
 chrome4.0+ begins to support 2D distortion and needs to add-webkit-private properties when it is actually used. The 
 
  
                                    
 safari3.1+ begins to support 2D distortion and needs to add-webkit-private properties when it is actually used. 
 
  
                                    
 opera10.5+ begins to support 2D variants and needs to add-o-private properties when it is actually used, but you do not need to add private properties in the Opera12.1 version, but you need to add private properties-webkit-private properties in the opera15.0+ version. 
 
  
                                    
 Mobile devices iOS safari3.2+, Android browser2.1+, Blackberry browser7.0+, Opera mobile14.0+, Chrome for android25.0+ You need to add private properties-webkit-, while opera Mobile11.0 to opera Mobile12.1 and Firefox for android19.0+ do not need to use browser private properties.