CSS3中的变形与动画(一)

一、transform属性

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Firefox需要前缀-moz-。
opera需要前缀-o-。
Internet Explorer 9 需要前缀 -ms-。
方法：
1.translate() 位移
使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
1> translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
2> translateX(x)仅水平方向移动（X轴移动）
3> translateY(Y)仅垂直方向移动（Y轴移动）
实现垂直居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .transform{
          padding: 20px;
          background:orange;
          color:#fff;
          position:absolute;
          top:50%;
          left:50%;
          border-radius: 5px;
          -webkit-transform:translate(-50%,-50%);
          -moz-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
        }
        
    </style>
</head>
<body>
    <div class="transform">
        我不知道我的宽度和高度，我要垂直居中
    </div>
</body>
</html>

垂直居中

2.rotate() 旋转

.transform{
            width: 300px;
            height: 300px;
            margin:0 auto;
            margin-top: 120px;
            border:2px dotted blue;
        }
.transform .rotate{
            width: 300px;
            height: 300px;
            background: green;
            line-height: 300px;
            color:#fff;
            text-align: center;

            transform: rotate(45deg);/*正数代表顺时针*/
            -webkit-transform:rotate(45deg);/*Chrome Safari*/
            -moz-transform:rotate(45deg);/*Firefox*/
            -o-transform:rotate(45deg);/*opera*/
            -ms-transform:rotate(45deg);/*IE9*/
        }
.transform .rotate span{
            font-size: 20px;
            display: block;

            transform: rotate(-45deg);/*负数代表逆时针*/
            -webkit-transform:rotate(-45deg);/*Chrome Safari*/
            -moz-transform:rotate(-45deg);/*Firefox*/
            -o-transform:rotate(-45deg);/*opera*/
            -ms-transform:rotate(-45deg);/*IE9*/

        }

示例旋转-顺时针旋转45度

3.scale() 缩放
缩放 scale 具有三种情况：
1> scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
2> scaleX(x)元素仅水平方向缩放（X轴缩放）
3> scaleY(y)元素仅垂直方向缩放（Y轴缩放）

4.skew() 扭曲
Skew()具有三种情况：
1> skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；
第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
2> skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
3> skewY(y)仅使元素在垂直方向扭曲变形 （Y轴扭曲变形）；

        .transform{
            width: 300px;
            height: 300px;
            margin:0 auto;
            margin-top: 120px;
            border:2px dotted blue;
        }
        .transform .skew{
            width: 300px;
            height: 300px;
            background: orange;
            line-height: 300px;
            color:#fff;
            text-align: center;

            transform: skew(30deg,-10deg);/*正数代表顺时针*/
            -webkit-transform:skew(30deg,-10deg);/*Chrome Safari*/
            -moz-transform:skew(30deg,-10deg);/*Firefox*/
            -o-transform:skew(30deg,-10deg);/*opera*/
            -ms-transform:skew(30deg,-10deg);/*IE9*/
        }
        .transform .skew span{
            font-size: 20px;
            display: block;

            transform: skew(-30deg,10deg);/*正数代表顺时针*/
            -webkit-transform:skew(-30deg,10deg);/*Chrome Safari*/
            -moz-transform:skew(-30deg,10deg);/*Firefox*/
            -o-transform:skew(-30deg,10deg);/*opera*/
            -ms-transform:skew(-30deg,10deg);/*IE9*/

        }

示例扭曲-X轴扭曲30度,Y轴扭曲10度

5.matrix() 矩阵
**matrix() **是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。
理解参考资料张鑫旭-理解CSS3 transform中的Matrix(矩阵)

插入 变形--原点 transform-origin
任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示：

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
transform-origin取值和元素设置：

二、transition属性

通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
transition-property属性
其对应具有过渡的CSS属性主要有：
transition-timing-function属性
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

示例：

div{
            width: 100px;
            height: 100px;
            background-color: black;
            opacity: 1;
            margin:100px;

            transition: opacity .5s linear,-webkit-transform 1s linear,width 1s linear,height 1s linear;
        }
        div:hover{
            opacity: 0.5;
            transform: rotate(360deg);
            -webkit-transform:rotate(360deg);
            width: 160px;
            height: 160px;
        }