[HTML5 + CSS3] detailed explanation of Transform

[HTML5 + CSS3] detailed explanation of Transform

Transform is literally a deformation, which means a change. In CSS3, transform mainly includes the following types: rotating rotate, twisting skew, scaling scale, moving translate, and matrix deformation matrix. Let's take a look at the specific implementation of transform rotation rotate, distortion skew, scaling scale, and moving translate in CSS3. Let's start with the transform syntax.

Syntax:

Transform: none |
 
  
[
  
   
] * That Is, transform: rotate | scale | skew | translate | matrix;
  
 

None: indicates no transformation; Represents one or more transform functions separated by spaces. In other words, we perform multiple attribute operations on an element at the same time, such as rotate, scale, and translate, however, we need to remind you that in the past, the overlay effects were separated by commas (,), but multiple attributes in the transform must be separated by spaces. We remember that they are separated by spaces.

Valid value:

The transform attribute implements some of the same functions that can be implemented using SVG. It can be used for inline and block-level elements. It allows us to rotate, scale, and move elements. It has several attribute value parameters: rotate; translate; scale; skew; matrix. The following describes how to use these attribute value parameters:

I. rotate

Rotate (): specify a 2D rotation (2D rotation) for the original element using the specified angle parameter. The transform-origin attribute must be defined first. Transform-origin defines the basis point of rotation, where angle refers to the rotation angle. If the set value is positive, it indicates clockwise rotation. If the set value is negative, it indicates clockwise rotation. For example: transform: rotate (30deg ):

2. Move translate

Moving translate can be divided into three situations: horizontal and vertical directions of translate (x, y) move at the same time (that is, the x axis and y axis move at the same time); translateX (x) only horizontal movement (X axis movement); translateY (Y) only vertical movement (Y axis movement), the specific usage is as follows:

1. translate ( [, ]): Specify a 2D translation using the vector [tx, ty]. tx is the first transition value parameter, and ty is the second transition value parameter option. If If not provided, ty takes 0 as its value. That is, translate (x, y), which indicates that the object is translated. The object is moved in the opposite direction according to the set value of x and y. The base point is the element center point by default when the value is negative, you can also change the base point based on transform-origin. For example, transform: translate (100px, 20px ):

2. translateX ( ): Specify a translation by specifying the number in the X direction. Only move the element to the X axis. The base point is the center point of the element. You can also change the base point position based on transform-origin. For example: transform: translateX (100px ):

3. translateY ( ): Specify a translation by specifying the number of Y directions. Only move to the Y axis. The base point is at the element base point. You can change the base point position through transform-origin. For example, transform: translateY (20px ):

Iii. scale

Scaling scale is very similar to moving translate, and it also has three situations: scale (x, y) enables horizontal and vertical scaling of elements (that is, simultaneous scaling of the x and y axes ); scaleX (x) elements only scale horizontally (x axis); scaleY (y) elements only scale vertically (y axis), but they have the same zoom center and base, the center point is the center position of the element. The zoom base is 1. If the value is greater than 1, the zoom in is displayed. If the value is smaller than 1, the zoom out is performed. The following describes how to use these three conditions:

1. scale ( [, ]): Two parameters are provided to run the [sx, sy] scaling vector to specify a 2D scale ). If the second parameter is not provided, take the same value as the first parameter. Scale (X, Y) is used to scale an element. You can use transform-origin to set the base point of the element. The base point is also located in the center of the element; in the base layer, X represents the horizontal scaling factor, and Y represents the vertical scaling factor. Y is an optional parameter. If Y is not set, X is used, Y has the same scaling factor. X prevails. For example, transform: scale (2, 1.5 ):

2. scaleX ( ): Use the [sx, 1] scaling vector to perform the scaling operation. sx is the required parameter. ScaleX indicates that the element is scaled only on the X axis (horizontal direction). Its default value is (), and its base point is also in the center of the element, we also use transform-origin to change the base point of an element. For example, transform: scaleX (2 ):

3. scaleY ( ): Use the [1, sy] scaling vector to perform the scaling operation. sy is the required parameter. ScaleY indicates that the element is scaled only in the Y axis (vertical direction), and its base point is also in the center of the element. You can use transform-origin to change the base point of the element. For example, transform: scaleY (2 ):

4. distorted skew

The distorted skew has the same three conditions as the translate and scale: skew (x, y) twist the element horizontally and vertically (the x axis and Y axis are distorted at a certain angle); skewX (x) only causes horizontal distortion of elements (X axis distortion); skewY (y) only causes vertical distortion of elements (y axis distortion), as shown in the following code:

1. skew ([,]): skew transformation on the X axis and Y axis (diagonal transformation ). The first parameter corresponds to the X axis, and the second parameter corresponds to the Y axis. If the second parameter is not provided, the value is 0, that is, there is no oblique cut in the Y axis. Skew is used to distort and change the line of an element. The first parameter is the horizontal distortion angle, and the second parameter is the vertical distortion angle. The second parameter is an optional parameter. If the second parameter is not set, the Y axis is 0deg. It is also based on the element center. We can also change the base point position of an element through transform-origin. For example: transform: skew (30deg, 10deg ):

2. skewX (): specify a skew transformation (diagonal transformation) along the X axis from the given angle ). SkewX is used to make the element take the center as the base point and twist and change the line in the horizontal direction (X axis). It can also change the base point of the element through transform-origin. For example, transform: skewX (30deg)

3. skewY (): specify a skew transformation (diagonal transformation) along the Y axis from the given angle ). SkewY is used to set the element to be distorted in the vertical direction (Y axis) based on the center and at the given angle. Similarly, we can use transform-origin to change the base point of an element. For example, transform: skewY (10deg)

V. matrix

Matrix ( , , , , , ): Specify a 2D transformation in the form of a (a, B, c, d, e, f) transformation matrix containing six values, it is equivalent to directly applying a [a B c d e f] transformation matrix. It is to reposition the element based on the horizontal (X axis) and vertical (Y axis). This attribute value uses the matrix involved in mathematics, here I just want to explain that the transform in CSS3 has such an attribute value. If you are interested, you can learn more about the use of martix.

Change element base point transform-origin

We have mentioned transform-origin many times. Its main function is to let us change the base point position of an element before performing the transform action, because the default base point of an element is its central position, in other words, when transform-origin is not used to change the base point position of an element, the rotate, translate, scale, skew, and matrix operations performed by transform are all changed in the center of the element. But sometimes we need to perform these operations on elements at different locations, so we can use transform-origin to change the base point position of the elements so that the element base point is not in the central position, to reach the base point you need. The following describes the usage rules:

Transform-origin (X, Y): The base point (reference point) used to set the motion of an element ). The default point is the center of the element. The values of X and Y can be hundreds of values, em, px, and X can also be the character parameter values left, center, and right; like Y and X, you can set the top, center, and bottom character values in addition to the hundred points. This looks a bit like our background-position settings. Below I will list their corresponding methods:

1. top left | left top is equivalent to 0 0 | 0% 0%

2. top | top center | center top is equivalent to 50% 0.

3. right top | top right is equivalent to 100% 0.

4. left | left center | center left is equivalent to 0 50% | 0% 50%

5. center | center is equivalent to 50% 50% (default)

6. right | right center | center right is equivalent to 100% 50%.

7. bottom left | left bottom is equivalent to 0 100% | 0% 100%

8. bottom | bottom center | center bottom equivalent to 50% 100%

9. bottom right | right bottom equivalent to 100% 100%

The left and center right values are in the horizontal direction, and the corresponding hundred values are left = 0%; center = 50%; right = 100%, and top center bottom values are in the vertical direction, top = 0%; center = 50%; bottom = 100%; if only one value is obtained, the vertical value remains unchanged. Let's take a look at the following instances respectively.

(1) transform-origin :( left, top ):

(2) transform-origin: right

(3) transform-origin (25%, 75%)

For more methods to change the central point, you can test it locally and try it out. Here we also want to remind you that transform-origin is not the attribute value in transform, he has his own syntax. As I have mentioned earlier, it is similar to our background-position usage, but it is different, because we do not need to distinguish the different writing methods of the browser kernel from background-position, but the transform-origin is the same as other css3 attributes, we need to add the corresponding prefix to different browsing kernels, the following lists the syntax rules of various browser kernels:

// Mozilla kernel Browser: firefox3.5 +-moz-transform-origin: x y; // Webkit kernel Browser: Safari and Chrome-webkit-transform-origin: x y; // Opera-o-transform-origin: x y; // IE9-ms-transform-origin: x y; // W3C standard transform-origin: x y;

Writing rules of transform in different browser kernels

// Mozilla kernel Browser: firefox3.5 +-moz-transform: rotate | scale | skew | translate; // Webkit kernel Browser: Safari and Chrome-webkit-transform: rotate | scale | skew | translate; // Opera-o-transform: rotate | scale | skew | translate; // IE9-ms-transform: rotate | scale | skew | translate; // W3C standard transform: rotate | scale | skew | translate;

The preceding table lists the writing rules of transform for different browsing kernels. To be compatible with different browsers, the preceding writing rules must be called.

Supports transform browsers

The same transform version in IE9 is incompatible. Many friends say that Internet Explorer is useless. What should I do? I personally think that CSS3 is a relatively cutting-edge technology. As a Web Front-end developer or enthusiast, it is necessary to understand and master a new technology. If it is necessary to wait until all browsers are compatible, then we can only say NO to css3. I will not use you. Because the boss of IE cannot keep up with each other, it is purely a personal opinion and does not represent any. In other words, if you are interested in the same way as me, ignore IE and we will continue to look at it.

In the above section, we have introduced in detail the settings of various transform attribute values and their respective parameters in CSS3. Next we will use an example to see how to use each attribute value, in order to save space and everyone's time, the subsequent examples are implemented based on this html, mainly because we use different transform settings in a: hover in the following menu, in other words, when you move to the link, each of the corresponding menu items has different changes, because transform is used in each menu. For details about each step, see the following example:

HTML Code:

      
 
 
      
  
  
Translate
      
  
  
TranslateX
      
  
  
TranslateY
      
  
  
Rotate
      
  
  
Scale
      
  
  
ScaleX
      
  
  
ScaleY
      
  
  
Skew
      
  
  
SkewX
      
  
  
SkewY
      
  
  
Matrix
    
 
 
   

To improve the effect, we add a CSS style to the navigation menu above:

 .menu ul {    border-top: 15px solid black;    padding: 0 10px;     } .menu ul li a{    color: #fff;    float: left;    margin: 0 5px;    font-size: 14px;    height: 50px;    line-height: 50px;    text-align: center;    width: 65px;    padding: 10px 5px;    background: #151515;    -moz-border-radius: 0 0 5px 5px;    -webkit-border-radius: 0 0 5px 5px;    border-radius: 0 0 5px 5px;    -moz-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;    -webkit-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;    box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;    text-shadow: 0 1px 1px #686868;    text-decoration: none; } .menu ul li.translate a{    background: #2EC7D2; } .menu ul li.translate-x a {    background: #8FDD21; } .menu ul li.translate-y a {    background: #F45917; } .menu ul li.rotate a {    background: #D50E19; } .menu ul li.scale a {    background: #cdddf2; } .menu ul li.scale-x a {   background: #0fDD21; } .menu ul li.scale-y a {   background: #cd5917; } .menu ul li.skew a {   background: #519; } .menu ul li.skew-x a {   background: #D50; } .menu ul li.skew-y a {   background: #E19; } .menu ul li.matrix a {   background: #919; }        

Here we use some of the previously-entered CSS3 attributes to create a navigation menu. If you follow it, you will surely see a very beautiful navigation menu locally, as the original demo page cannot be linked here, we have to paste the thumbnail so that you can have a preliminary visual effect. The preliminary effect is as follows:

From the menu we can clearly see that we correspond to Translate, TranslateX, TranslateY, Rotate, Scale, ScaleX, ScaleY, Skew, SkewX, SkewY, and Matrix in transform, next we will add their respective effects to the corresponding a: hover:

1. transform: translate (x, y ):

  .menu ul li.translate a:hover {     -moz-transform: translate(-10px,-10px);     -webkit-transform: translate(-10px,-10px);     -o-transform: translate(-10px,-10px);     -ms-transform: translate(-10px, -10px);     transform: translate(-10px,-10px);  }

Effect:

2. transform: translateX (x)

  .menu ul li.translate-x a:hover {    -moz-transform: translateX(-10px);    -webkit-transform: translateX(-10px);    -o-transform: translateX(-10px);    -ms-transform: translateX(-10px);    transform: translateX(-10px);            }

Effect:

3. transform: translateY (y)

  .menu ul li.translate-y a:hover {     -moz-transform: translateY(-10px);     -webkit-transform: translateY(-10px);     -o-transform: translateY(-10px);     -ms-transform: translateY(-10px);     transform: translateY(-10px);            }

Effect:

4. transform: rotate (angle value)

 .menu ul li.rotate a:hover {   -moz-transform: rotate(45deg);   -webkit-transform: rotate(45deg);   -o-transform: rotate(45deg);   -ms-transform: rotate(45deg);   transform: rotate(45deg);           }

Effect:

5. transform: scale (x, y)

 .menu ul li.scale a:hover {   -moz-transform: scale(0.8,0.8);   -webkit-transform: scale(0.8,0.8);   -o-transform: scale(0.8,0.8);   -ms-transform: scale(0.8,0.8);   transform: scale(0.8,0.8);           }

Effect:

6. transform: scaleX (x)

  .menu ul li.scale-x a:hover {    -moz-transform: scaleX(0.8);    -webkit-transform: scaleX(0.8);    -o-transform: scaleX(0.8);    -ms-transform: scaleX(0.8);    transform: scaleX(0.8);           }

Effect:

7. transform: scaleY (y)

  .menu ul li.scale-y a:hover {     -moz-transform: scaleY(1.2);     -webkit-transform: scaleY(1.2);     -o-transform: scaleY(1.2);     -ms-transform: scaleY(1.2);     transform: scaleY(1.2);           }

Effect:

8. transform: skew (x, y)

  .menu ul li.skew a:hover {     -moz-transform: skew(45deg,15deg);     -webkit-transform: skew(45deg,15deg);     -o-transform: skew(45deg,15deg);     -ms-transform: skew(45deg,15deg);     transform: skew(45deg,15deg);            }

Effect:

9. transform: skewX (x)

  .menu ul li.skew-x a:hover {    -moz-transform: skewX(-30deg);    -webkit-transform: skewX(-30deg);    -o-transform: skewX(-30deg);    -ms-transform: skewX(-30deg);    transform: skewX(-30deg);           }

Effect:

10. transform: skewY (y)

  .menu ul li.skew-y a:hover {    -moz-transform: skewY(30deg);    -webkit-transform: skewY(30deg);    -o-transform: skewY(30deg);    -ms-transform: skewY(30deg);    transform: skewY(30deg);           }

Effect:

11. transform: matrix (a, B, c, d, e, f)

  .menu ul li.matrix a:hover {    -moz-transform: matrix(1,1,-1,0,0,0);    -webkit-transform: matrix(1,1,-1,0,0,0);    -o-transform: matrix(1,1,-1,0,0,0);    -ms-transform: matrix(1,1,-1,0,0,0);    transform: matrix(1,1,-1,0,0,0);            }

Effect:

Matrix in transform is relatively complex. If you are interested, you can click here to learn more about Matrix usage. I will not talk about it here, but I will not be clear about it.

Next let's take a look at the final result. If you have followed this instance locally, you can see very good results.

The above example shows the effects of various styles in transform. We need to remind you that the effects above are based on the center of the element itself, let's look at an example of changing the element base point.

We changed the base point of all the labels to left top (the default front is center) based on the previous instance)

  .menu ul li.transform-origin a {    -moz-transform-origin: left top;    -webkit-transform-origin: left top;    -o-transform-origin: left top;    -ms-transform-origin: left top;    transform-origin: left top;  } 

Let's take a look at the changes in the transform effect after the base point of the tag is changed:

We can see that after changing the elements. Any attribute value setting of the transform element will be affected. In other words, any action changes of the transform element are based on the element's center, at the same time, we can change the base point of any element through transform-origin to achieve different effects. Interested friends can learn more about this.

Finally, let's look at a transform effect instance that uses multiple attribute values.

 .demo a{   width: 100px;   padding: 5px;   background: red;   display: block; } .demo a:hover {     -moz-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);   -webkit-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);   -o-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);   -ms-transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);   transform: rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg); }

Note that when multiple attribute values are used, they cannot be separated by commas (,). They must be separated by spaces. Remember that they are separated by spaces, as shown in the code above.

Now we have finished introducing the CSS3 transform. So far, we have learned the following in CSS3: gradient CSS3 Gradient, transparent CSS3 RGBA, rounded corner CSS3 Border-radius, Text shadow CSS3 Text-shadow, Border shadow CSS3 Box-shadow, and today's deformation transform attributes usage method. In the next section, we will learn how to use another attribute Transition in CSS3 animation. If you are interested in CSS3, please observe the updates on this site.

Next, we will list the relevant links for you to learn more about CSS3 on this site.