CSS3之变形transform

刚使用css3的变形属性时，总是搞混或者不会正确使用，特记录一篇文档，以备查看。

       本文示例中使用到的html结构都是统一的，代码如下：

<style>
        #wrapper{
            width: 200px;
            height: 200px;
            border: 1px dotted red;
            margin: 100px auto;
            margin:100px auto;
        }
        #rotate{
            width: 200px;
            height: 200px;
            background: orange;
            line-height: 200px;
            text-align: center;
       }
 </style>
<div id="wrapper">
        <div id="rotate">
            动画特效
        </div>
</div>

一 四种基本变形

transform属性用来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

旋转 rotate

特点：

      1、中心固定不动，旋转对顶角
      2、只旋转，不改变元素的形状

用法：transform: rotate(45deg);//该代码作用是顺时针旋转45度

作用：
       使元素以其中心(默认中心transform-origin为元素中心)为轴进行二维旋转。

参数 :
       表示旋转角度，单位deg，正数为顺时针旋转，负数为逆时针旋转；

CSS代码如下：

<style>
#rotate{
            transform: rotate(45deg);
        }
</style>

       页面效果如下：

倾斜 skew

特点：

   1、中心固定不动、沿x轴/y轴方向平行挤拉对顶角
   2、不旋转，只改变元素的形状

用法：transform: skew(30deg) 或 transform: skew(30deg, 30deg);

作用：
       使元素以其中心(默认中心transform-origin为元素中心)沿X轴或/和Y轴按一定角度进行二维倾斜。

参数：
       表示倾斜角度，单位deg。

        一个参数时：表示水平方向的倾斜角度；
       两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

CSS代码如下：

<style>
        #rotate{
            -webkit-transform: skew(30deg,30deg);
       }
 </style>

页面效果如下：

缩放 scale

特点：

1、中心固定不动、沿x轴/y轴方向平行挤拉对边

用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);

作用：
       使元素以其中心(默认中心transform-origin为元素中心)沿x轴/y轴方向按一定倍数进行二维缩放

参数:
       表示缩放倍数；

       一个参数时：表示水平和垂直同时缩放该倍率
       两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

注：scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

单项方法

        scaleX(x)  仅水平方向(即x轴方向)缩放
        scaleY(y)  仅垂直方向(即y轴方向)缩放

CSS代码如下：

<style>
        #rotate{
            -webkit-transform: scale(0.5,2);
       }
 </style>

页面效果如下：

移动 translate

特点：

  1、沿x轴/y轴方向平行移动

用法：transform: translate(45px) 或者 transform: translate(45px, 150px);

作用：
       使元素从原来位置向指定方向移动，而不影响其他元素的布局。类似于position中的relative

参数：
       表示移动距离，单位px，

       一个参数时：表示水平方向的移动距离；
       两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

注：translate的百分比是相对于自身的宽高来定义的

单项方法

        translateX(x) 仅水平方向移动（X轴移动）
        translateY(Y) 仅垂直方向移动（Y轴移动）

CSS代码如下：

<style>
        #rotate{
            -webkit-transform:translate(20px,10px);
       }
 </style>

页面效果如下：

基准点 transform-origin

在没有重置transform-origin改变元素原点位置的情况下，CSS使用transform进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。

       使用transform-origin属性，可以改变变形的基准点。

用法：transform-origin: 10px 10px;

取值：
       transform-origin取值和元素设置背景中的background-position取值类似:

       共两个参数，表示相对左上角原点的距离，单位px或百分比，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；

       两个参数除了可以设置为具体的像素值或百分比，还可以是：第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

变形组合

       上述讲解了transform属性的四种基本变形，在实际使用中，这四种编写方式也会组合起来使用，常见的组合使用方式有如下2种

矩阵变换 matrix

用法：transform: matrix(1,0,0,1,50,50)
作用：
       用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。

   其中：
       a为元素的水平伸缩量，1为原始大小；
       b为纵向扭曲，0为不变；
       c为横向扭曲，0不变；
       d为垂直伸缩量，1为原始大小；
       e为水平偏移量，0是初始位置；
       f为垂直偏移量，0是初始位置

矩阵变换相当于：
matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY());
它是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素。

多方法组合

      第一种方法使用的场景较少，多数情况下是组合使用旋转、缩放、倾斜、移动这几个方法来对一个元素进行多重变形。

用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

        这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate  2.scalse  3.skew  4.translate