动画（1）

变形(transform)

定义

在CSS中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。

四种变形

旋转

使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。

缩放

使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。

transform：scale（0.5）；（缩小一半）

注：可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率

transform：scale（0.5，2）；//水平方向缩小一半，垂直方向放大一倍。

倾斜

使用skew方法实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

transform：skew（30deg，30deg）；//水平方向上倾斜30度，垂直方向上倾斜30度。

注：只使用一个参数，省略另一个参数

transform：skew（30deg）；（这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜）

移动

使用translate方法来移动文字或图像，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

transform：translate（50px，50px）；//水平方向上移动50px，垂直方向上移动50px

注：只使用一个参数，省略另一个参数

transform：translate（50px）；（这种情况下视为只在水平方向上移动，垂直方向上不移动。）

对一个元素使用多种变形的方法

transform：translate（100px，200px）rotate（45deg）scale（1.5）；

#div1{
            width: 300px;
            height: 300px;
            background: red;
            margin: 100px auto 0;
            /*transform: translate(100px,200px);*/
            /*transform: rotate(45deg);*/
            transform: scale(1.5);
            /*:左边属性，右边属性值；*/
            /*若三个全显示，用空格隔开*/

        }