CSS3 animation properties: Introduction to the transform property

The content of this article is about the attributes of CSS3 animation: Introduction to the transform attribute, which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Transform literally means deformation and change. In CSS3, transform mainly includes the following types: rotate, distortion skew, scale and move translate and matrix Transform matrix. Let's take a look at how to implement the rotation, skew, scale and translate of transform in CSS3. As usual, let's start with the syntax of transform.

Grammar:

   transform ： none | <transform-function> [ <transform-function> ]* 
   也就是：
   transform: rotate | scale | skew | translate |matrix;

none: means no transformation; means one or more transformation functions, separated by spaces; in other words That is, we perform multiple attribute operations of transform on an element at the same time, such as rotate, scale, and translate. However, we need to remind everyone here that in the past, our superimposed effects were separated by commas (","), but when using transform Multiple attributes need to be separated by spaces. Remember, they are separated by spaces.

Value:

The transform attribute implements some of the same functions that can be implemented with SVG. It can be used on inline elements and block elements. It allows us to rotate, scale and move elements. It has several attribute value parameters: rotate; translate; scale; skew; matrix. Below we will introduce the specific usage of these attribute value parameters respectively:

1. Rotate rotate

rotate(): Through the specified angle The parameter specifies a 2D rotation for the original element, and the transform-origin attribute must first be defined. Transform-origin defines the base point of rotation, where angle refers to the rotation angle. If the set value is a positive number, it means clockwise rotation. If the set value is a negative number, it means counterclockwise rotation. For example: transform:rotate(30deg):

2. Move translate

Move translate We can divide it into three situations: translate (x,y) moves horizontally and vertically at the same time (that is, the X-axis and Y-axis move simultaneously); translateX(x) only moves horizontally (X-axis moves); translateY(Y) only moves vertically (Y-axis moves) ), the specific usage is as follows:

1. translate([, ]): Specify a 2D translation through vector [tx, ty], tx is the first transition value parameter, ty is the second transition value parameter option. If is not provided, ty has 0 as its value. That is, translate(x,y), which means that the object is translated according to the set x, y parameter values. When the value is a negative number, the object is moved in the opposite direction. Its base point defaults to the center point of the element, or it can also be based on transform-origin. Make a base point change. For example, transform:translate(100px,20px):

2, translateX(): Specify a translation by giving a number in the X direction. Only move the element towards the x-axis. Similarly, its base point is the center point of the element. You can also change the position of the base point according to transform-origin. For example: transform: translate Only move to the Y axis, the base point is at the center point of the element, and the position of the base point can be changed through transform-origin. For example: transform:translateY(20px):

3. Scaling scale

Scaling scale is very similar to moving translate. There are also three situations: scale(x,y) makes the element scale horizontally and vertically at the same time (that is, the X-axis and Y-axis scale simultaneously); scaleX(x) the element only scales horizontally (X-axis scaling); scaleY( y) elements only scale in the vertical direction (Y-axis scaling), but they have the same scaling center point and base. The center point is the center position of the element, and the scaling base is 1. If its value is greater than 1, the element will be enlarged, otherwise its value Less than 1, the element shrinks. Let’s take a look at the specific usage of these three situations:

1. scale([, ]): Provides two parameters for executing [sx,sy] scaling vector Specify a 2D scale. If the second parameter is not provided, it takes the same value as the first parameter. scale(X,Y) is used to scale the element. You can set the base point of the element through transform-origin. The base point is also at the center of the element. In the base, X represents the horizontal scaling multiple, and Y represents the vertical scaling multiple. , and Y is an optional parameter. If the Y value is not set, it means that the scaling factors in the X and Y directions are the same. And subject to X. For example: transform:scale(2,1.5):

2. scaleX(): Use [sx,1] scaling vector to perform the scaling operation, sx is the required parameter. scaleX means that the element only scales the element along the X-axis (horizontal direction). Its default value is (1,1). Its base point is also at the center of the element. We also change the base point of the element through transform-origin. For example: transform:scaleX(2):

#3, scaleY(): Use [1,sy] scaling vector to perform scaling operations, sy is required parameter. scaleY means that the element only scales the element on the Y axis (vertical direction), and its base point is also at the center of the element. You can change the base point of the element through transform-origin. For example, transform:scaleY(2):

4. Distortion skew

There are three types of distortion skew like translate and scale. Situation: skew(x,y) causes the element to be distorted in both the horizontal and vertical directions (the X-axis and the Y-axis are distorted at a certain angle at the same time); skewX(x) only causes the element to be distorted in the horizontal direction (the X-axis is distorted) Deformation); skewY(y) only distorts the element in the vertical direction (Y-axis distortion), the specific use is as follows:

1, skew( [, ]): X Skew transformation on the 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 bevel in the Y-axis direction. Skew is used to distort elements. 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 will be 0deg. Also taking the center of the element as the base point, we can also change the base point position of the element through transform-origin. For example: transform:skew(30deg,10deg):

##2, skewX(): Specify a skew transformation along the X-axis at a given angle (skew transformation). skewX makes the element take its center as the base point and twist it in the horizontal direction (X-axis). You can also change the base point of the element through transform-origin. For example: transform:skewX(30deg)

##3, skewY(): Specify a skew transformation along the Y-axis at a given angle. . skewY is used to set the element's center as the base point and twist it in the vertical direction (Y axis) at a given angle. Similarly, we can change the base point of the element through transform-origin. For example: transform:skewY（10deg）

5. Matrix

matrix(, , , , , ): Specify a 2D transformation in the form of a six-value (a,b,c,d,e,f) transformation matrix, It is equivalent to directly applying a [a b c d e f] transformation matrix. It is to reposition elements based on the horizontal direction (X axis) and vertical direction (Y axis). This attribute value uses a matrix in mathematics. Here I will simply say that the transform in CSS3 has such an attribute value. If there is Interested friends can learn more about the deeper use of martix, so I won’t go into details here.

Change the base point of the element transform-origin

We mentioned transform-origin many times before. Its main function is to allow us to Change the base point position of the element, because the default base point of our element is its center position. In other words, when we do not use transform-origin to change the base point position of the element, the operations such as rotate, translate, scale, skew, and matrix performed by transform are all based on The element's center position changes. But sometimes we need to perform these operations on elements at different positions, then we can use transform-origin to change the base point position of the element so that the base point of the element is no longer at the center position to achieve the base point position you need. Let's mainly take a look at its usage rules:

transform-origin(X,Y): Used to set the base point (reference point) of the movement of the element. The default point is the center point of the element. The values ​​of X and Y can be percentage values, em, px, and X can also be character parameter values ​​left, center, and right; Y, like X, can also set character values ​​top, center, and bottom in addition to percentage values. This looks a bit like our background-position setting; below I list their corresponding writing 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 等价于 0 50% | 0% 50%

5、center | center center 等价于 50% 50%（默认值）

6、right | right center | center right 等价于 100% 50%

7、bottom left | left bottom 等价于 0 100% | 0% 100%

8、bottom | bottom center | center bottom 等价于 50% 100%

9、bottom right | right bottom 等价于 100% 100%

其中 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变，我们分别来看看以下几个实例

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

(2)transform-origin:right

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

更多的改变中心基点办法，大家可以在本地多测试一下，多体会一下，这里还要提醒大家一点的是，transform-origin并不是transform中的属性值，他具有自己的语法，前面我也说过了，说简单一点就是类似于我们的background-position的用法，但又有其不一样，因为我们background-position不需要区别浏览器内核不同的写法，但transform-origin跟其他的css3属性一样，我们需要在不同的浏览内核中加上相应的前缀，下面列出各种浏览器内核下的语法规则：

  //Mozilla内核浏览器：firefox3.5+
  -moz-transform-origin: x y;
  //Webkit内核浏览器：Safari and Chrome
  -webkit-transform-origin: x y;
  //Opera
  -o-transform-origin: x y ;
  //IE9
  -ms-transform-origin: x y;
  //W3C标准
  transform-origin: x y ;

transform在不同浏览器内核下的书写规则

  //Mozilla内核浏览器：firefox3.5+
  -moz-transform: rotate | scale | skew | translate ;
 //Webkit内核浏览器：Safari and Chrome
  -webkit-transform: rotate | scale | skew | translate ;
 //Opera
  -o-transform: rotate | scale | skew | translate ;
 //IE9
  -ms-transform: rotate | scale | skew | translate ;
 //W3C标准
  transform: rotate | scale | skew | translate ;

上面列出是不同浏览内核transform的书写规则，如果需要兼容各浏览器的话，以上写法都需要调用。

支持transform浏览器

同样的transform在IE9下版本是无法兼容的，之所以有好多朋友说，IE用不了，搞这个做什么？个人认为，CSS3推出来了，他是一门相对前沿的技术，做为Web前端的开发者或者爱好者都有必要了解和掌握的一门新技术，如果要等到所有浏览器兼容，那我们只能对css3说NO，我用不你。因为IE老大是跟不上了，，，，纯属个人观点，不代表任何。还是那句话，感兴趣的朋友跟我一样，不去理会IE，我们继续看下去。

在上面我们详细介绍了CSS3中transform的各种属性值的设置以及其各自的参数，下面我们通过一个实例来看看每一种属性值的使用，为了节约空间和大家的时间，我们后面的实例都是在这个html基础上实现，主要是我们在下面的菜单中的a:hover中分别使用不同的transform的设置，换句话说，当你移动到链接上时，相应的每一个菜单项有不同的变化，因为我们在每个菜单中使用了transform。具体每一步我们可以看下面的实例：

HTML Code:

  <p class="menu">
    <ul class="clearfix">
      <li class="item translate"><a href="#">Translate</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 href="#">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 href="#">ScaleY</a></li>
      <li class="item skew"><a href="#">Skew</a></li>
      <li class="item skew-x"><a href="#">SkewX</a></li>
      <li class="item skew-y"><a href="#">SkewY</a></li>
      <li class="item matrix"><a href="#">Matrix</a></li>
    </ul>
  </p>

为了效果更好一点，我们给上面的导航菜单加上一点CSS样式：

 .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;
 }

在这里我们使用了一些前面所进的CSS3的属性制作出来的导航，如果你跟着做的话，在你本地一定能看到一个非常靓丽的导航菜单，这里由于无法链接demo原页面，只好贴上缩略图，让大家有一个初步效果视觉初步的效果如下：

从效果图上我们可以清楚的看到菜单上我们分别对应的是transform中的Translate、TranslateX、TranslateY、Rotate、Scale、ScaleX、ScaleY、Skew、SkewX、SkewY和Matrix，下面我们就在相应的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);
  }

效果：

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);          
  }

效果：

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);          
  }

效果：

4、transform:rotate(角度值)

 .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);          
 }

效果：

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);          
 }

效果：

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);          
 }

效果：

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);          
 }

效果：

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);          
  }

效果：

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);          
 }

效果：

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);          
 }

效果：

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);          
  }

效果：

transform中的matrix是相对的复杂，如果感兴趣的朋友可以点这里进去学民更多有关于Matrix的用法，我在这里就不多说了，说了也讲不清楚。

下面我们来看看最终的效果图，如果你在本地跟着这个实例做了的话，那么你就能看到非常好的效果了。

上面的实例效果展示了有关于transform中各种风格效果，这里需要提醒大家，我们上面的效果都是以元素自身的中心点为基点的，下面我们来看一个改变元素基点的实例

我们在前面的实例基础改变一下所有a标签基点位置为left top（前面默认是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;
  }

大家一起看看改变了a标签基点后transform下各种效果有什么样的变化：

从效果图中大家可以明显的看出，改变元素的基点后。元素进行transform任何属性值的设置都会有影响，换句话说，我们transform进行任何动作变化都是以元素的中心为基点，同时我们可以通过transform-origin来改变任何元素的基点，从而达到不同的效果。感兴趣的朋友可以去了解更多有关这方面的知识。

最后我们再来看一个transform运用多个属性值的效果实例

 .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);
 }

这里需要注意的是使用多个属性值时，其之间不能用逗号（“，”）分隔，必须使用空格分隔，记住了是空格分隔，如上面代码所示。

相关文章推荐：

CSS3制作动画的属性： Animation属性的介绍

CSS3中伪元素实现气泡框的代码（before、after）

The above is the detailed content of CSS3 animation properties: Introduction to the transform property. For more information, please follow other related articles on the PHP Chinese website!