CSS3 Animate properties: Introduction to transform Properties

This article brings the content is about CSS3 animation properties: Transform properties of the introduction, there is a certain reference value, there is a need for friends to refer to, I hope you have some help.

Transform is literally morphing, changing the meaning. The main transform in CSS3 include the following: rotating rotate, twisting skew, scaling scale and moving translate , and Matrix variants. Let's take a look at the transform rotation rotate, twist skew, zoom scale, and move translate in CSS3, and we'll start with the syntax of transform in the old way.

Grammar:

   Transform:none | <transform-function> [<transform-function>]*    :   transform:rotate | scale | skew | Translate |mat Rix

None: No, No. Transform;<transform-function> represents one or more transform functions, separated by spaces; in other words, we operate multiple properties that transform an element at the same time, such as rotate, scale, Translate three kinds, but we need to remind you that in the past, our overlay effect is separated by commas (","), but when you use multiple attributes in transform, you need a space to separate them. We remember that it is a space-separated.

Value:

The Transform property implements some of the same functionality that can be implemented with SVG. It can be used for inline (inline) and block-level (block) elements. It allows us to rotate, scale, and move elements, and he has several attribute value parameters: Rotate;translate;scale;skew;matrix. Here are some examples of how to use these property value parameters separately:

First, rotating rotate

Rotate (<angle>): Specifies a 2D rotation (2D rotation) of the original element with the specified angle parameter, preceded by the definition of the Transform-origin attribute. Transform-origin defines the base point of the rotation, where angle refers to the rotation angle, if the set value is a positive number for clockwise rotation, and if the value is set to a negative number, the counter-clockwise rotation. such as: Transform:rotate (30deg):

Second, mobile translate

Moving the translate we are divided into three cases: translate (x, y) move horizontally and vertically (i.e. simultaneous movement of the axis and the y axis); TranslateX (x) moves horizontally (x-axis); Translatey (y) Move vertically only (Y-axis movement), using the following method:

1, translate (<translation-value>[, <translation-value>]): Specify a 2D translation,tx by Vector [TX, Ty] is the first transition value parameter, ty is the second transition value parameter option. If not provided, Ty takes 0 as its value. That is, translate (x, y), which indicates that the object is panned, according to the set X, y parameter value, when the values are negative, moving the object in the opposite direction, its base point defaults to the element center point, you can also change base point according to Transform-origin. such as Transform:translate (100px,20px):

2, TranslateX (<translation-value>): Specify a translation by the number given in the X direction. Moving elements only to the x-axis, as well as the center point of the element, can also change the base point position according to Transform-origin. such as: Transform:translatex (100px):

3, Translatey (<translation-value>): Specify a translation by the number given in y direction. Moving only to the y-axis, base point at the element heart, you can change the base point position by Transform-origin. such as: Transform:translatey (20px):

Third, scaling scale

Scaling scale and moving translate are extremely similar, and he also has three cases: scale (x, y) scales the elements horizontally and vertically (that is, simultaneous scaling of the y-axis and both); ScaleX (x) elements scale only horizontally (x-axis scaling); ScaleY (y) Elements are scaled only vertically (y-axis scaling), but they have the same zoom center point and cardinality, whose center point is the center of the element, the scale cardinality is 1, and if its value is greater than 1, the value is less than 1, and the element shrinks. Let's take a look at these three scenarios in specific ways:

1. Scale (<number>[, <number>]): Provides two parameters that perform the [sx,sy] scaling vector to specify a 2D scale (2D scaling). If the second argument is not provided, take the same value as the first parameter. Scale (x, y) is used for scaling elements, which can be set by Transform-origin the base point of an element, the same base point at the center of the element, the X in the base represents a multiple of horizontal scaling, Y for the vertical direction, and y is an optional parameter, if Y is not set , the magnification in X, y two directions is the same. and take x as the standard. such as: Transform:scale (2,1.5):

2, ScaleX (<number>): Use the [sx,1] scaling vector to perform the scaling operation, SX is the desired parameter. ScaleX indicates that the element is scaled only on the x-axis (horizontal), his default value is (+), and its base point is at the center of the element, and we also change the base point of the element by Transform-origin. Example: Transform:scalex (2):

3, ScaleY (<number>): Use the [1,sy] scaling vector to perform the scaling operation, SY is the required parameter. ScaleY means that the element is scaled only on the y-axis (vertically), and its base point is also at the center of the element, and can be transform-origin to change the base point of the element. such as Transform:scaley (2):

Four, twist skew

Twisted skew and translate, scale also have three cases: skew (x, y) distorts the elements in both horizontal and vertical directions (both the × and Y axes are distorted at a certain angular value); skewx (x) only distorts the elements in the horizontal direction (distortion of the x-axis) Skewy (y) only distorts the element in the vertical direction (distortion of the y-axis), using the following:

1, skew (<angle> [, <angle>]): Skew transformation (oblique-cut transformation) on the x-axis y-axis. 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, which means there is no miter in the y-axis direction. The skew is used to distort the elements, the first parameter is the horizontal twist angle, and the second parameter is the vertical twist angle. The second parameter is an optional parameter, and if the second parameter is not set, then the y-axis is 0deg. Also at the center of the element, we can change the base point position of the element by Transform-origin. such as: Transform:skew (30deg,10deg):

2, Skewx (<angle>): Specify a skew transformation (oblique-cut transformation) along the x-axis at the given angle. Skewx is to make an element base on its center and distort it in the horizontal (x-axis) direction, as well as to change the base point of the element by Transform-origin. Example: Transform:skewx (30deg)

3, Skewy (<angle>): Specify a skew transformation (oblique-cut transformation) along the y-axis at the given angle. The skewy is used to set the element to its center base point and distort it in the vertical direction (Y axis) at the given angle. We can also change the base point of an element by Transform-origin. Example: Transform:skewy (10deg)

Matrices Matrix

Matrix (<number>, <number>, <number>, <number>, <number>, <number>): With a value of six (A, B, C,D,E,F) The form of a transformation matrix specifies a 2D transformation, which is equivalent to applying a [a B c D E F] transformation matrix directly. is to reposition the element based on the horizontal (x-axis) and vertical (Y-axis), this property value uses a matrix that involves mathematics, and I'm just saying here that the transform in CSS3 has such an attribute value, and if interested friends can go to know the deeper Martix use method, There's not much to say here.

Change Elemental Base Point Transform-origin

We have mentioned transform-origin this many times before, and his main function is to let us change the base point position of the element before we perform the transform action, because the default base point of our element is its central position, In other words, if we do not use Transform-origin to change the position of the element base point, the Rotate,translate,scale,skew,matrix, such as transform, are changed in the central position of the element. But sometimes we need to perform these operations on elements in different locations, so we can use Transform-origin to change the base point position of the element so that the element base point is not in the central position to reach the base point you need. Let's look at its usage rules:

Transform-origin (x, y): the base point (reference point) used to set the motion of the element. The default point is the center point of the element. where x and Y values can be a percent, em,px, where x can also be a character parameter value Left,center,right;y and X, in addition to the hundred points can also set the character value Top,center,bottom, This looks a bit like our background-position setup; below I'll list their corresponding wording:

1. Top Left | Left top equivalent to 0 0 | 0% 0%

2, Top | Top Center | Center top equivalent to 50% 0

3, right Top | Top right is equivalent to 100% 0

4, left | Left Center | Center left equivalent to 0 50% | 0% 50%

5. Center | Center Center is equivalent to 50% 50% (default value)

6. Right | Right Center | Center right is equivalent to 100% 50%

7, Bottom left | Left bottom 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%

Where Left,center right is the horizontal direction value, the corresponding hundred points for left=0%;center=50%;right=100% and top center bottom is the vertical direction of the value, wherein top=0%;center=50%; bottom=100%; If you take only one value, indicating that the vertical direction value is constant, let's take a look at the following examples

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

(2) Transform-origin:right

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

More Change Center base point method, you can in the local more test, more experience, here also to remind everyone is, Transform-origin is not transform attribute value, he has his own grammar, before I also said, The simple point is similar to the use of our background-position, but it is different, because we background-position do not need to distinguish between the browser kernel, But Transform-origin with the other CSS3 properties, we need to add the appropriate prefix to the different browse kernels, and the following are the syntax rules for the 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;  Standard  transform-origin:x y;

Transform rules for writing under different browser cores

  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 ; Standard  Transform:rotate | scale | skew | translate;

The above list is different browsing kernel transform writing rules, if you need to be compatible with each browser, the above should be called.

Support Transform Browser

The same transform in the IE9 version is not compatible, the reason why there are many friends said that IE can not use, what to do this? Personally think, CSS3 launched, he is a relatively cutting-edge technology, as a web front-end developers or enthusiasts have to understand and master a new technology, if you want to wait until all browsers compatible, then we can only say no to CSS3, I use not you. Because IE boss is not up to,,,, purely personal opinion, does not represent any. Or that sentence, interested friends like me, not to ignore IE, we continue to watch.

In the above we introduced in detail the various property values of the transform in the CSS3 and their respective parameters, below we through an example to see the use of each property value, in order to save space and everyone's time, the example behind us is on this HTML based on the implementation, The main reason is that we use different transform settings in A:hover in the menu below, in other words, when you move to the link, each of the corresponding menu items has different changes because we use transform in each menu. For each step we can look at the following example:

HTML Code:

  <p class= "Menu" > <ul class= "Clearfix" > <li class= "Item translate" ><a href= "#" >translate&  lt;/a></li> <li class= "Item Translate-x" ><a href= "#" >TranslateX</a></li> <li class= "Item Translate-y" ><a href= "#" >TranslateY</a></li> <li class= "Item Rotate" ><a HR      ef= "#" >Rotate</a></li> <li class= "Item scale" ><a href= "#" >Scale</a></li> <li class= "Item Scale-x" ><a href= "#" >ScaleX</a></li> <li class= "Item Scale-y" ><a HRE f= "#" >ScaleY</a></li> <li class= "Item Skew" ><a href= "#" >Skew</a></li> &lt Li class= "Item skew-x" ><a href= "#" >SkewX</a></li> <li class= "Item skew-y" ><a href= "#" & Gt   skewy</a></li> <li class= "Item Matrix" ><a href= "#" >Matrix</a></li> </ul> </p>

For a better effect, let's add a little 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.tra Nslate-y a {background: #F45917;}. Menu ul li.rotate a {background: #D50E19;}. Menu ul Li.scale a {Backgroun D: #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 {back Ground: #919; }

Here we use some of the previous CSS3 properties made out of the navigation, if you do, you will be able to see a very beautiful local navigation menu, here because you can not link to the original page, have to stick to the thumbnail, so that we have a preliminary effect of visual preliminary effect as follows:

From the above we can clearly see the menu we correspond to is transform in the translate, TranslateX, Translatey, Rotate, scale, ScaleX, ScaleY, Skew, Skewx, Skewy and Matrix, below we are in the corresponding a:hover plus the respective effect:

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:

Transform in the matrix is relatively complex, if interested friends can click here to learn more about the use of the matrix, I do not say more here, said it is not clear.

Let's take a look at the final, if you follow this example locally, then you can see a very good effect.

The above example effect shows a variety of style effects in the transform, here we need to remind you that our effect is based on the element's own center point, the following we look at a change element base point of the example

We change the base of the previous instance to the left top of the A-label base point position (front default is Center center)

  . 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 change of the A-label base point after the various effects of transform:

It can be obvious from the point of change that the elements of the base. The transform element has an effect on the setting of any property value, in other words, we transform any action changes based on the center of the element, and we can change the base point of any element by Transform-origin to achieve different effects. Interested friends can go to learn more about this area of knowledge.

Finally, let's look at a transform effect instance using 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); }

It is important to note that when using multiple attribute values, they cannot be separated by commas (","), must be separated by spaces, and remember that they are separated by spaces, as shown in the preceding code.