CSS3中transform、过渡动画以及关键帧的使用

一、变形（transform）

 

     1.   translate（x，y）定义2D转换，沿着x轴和y轴移动元素，实现位移效果。

        translateX（n）沿着x轴移动元素。

        translateY（n）沿着y轴移动元素。

 个人理解就是将元素添加定位：translateX就是left，translateY就是right。

        2.scale（x，y）定义2D缩放转换，改变元素的宽度和高度，实现缩放效果

        scaleX（n）定义2D转换，改变元素宽度。

        scaleY（n）定义2D转换，改变元素高度。

      3.  rotate（angle）定义2D旋转，在参数中规定角度。实现旋转效果。

        

      4.   skew（x-angle，y-angle）定义2D倾斜旋转，沿着x轴和y轴。实现变形效果。

         skewX（angle）定义2D倾斜转换，沿着X轴。

        skewY（angle）定义2D倾斜转换，沿着Y轴。

      5. matrix：

        

 

二、transform-origin：调整元素的基点

        1.transform-origin：x-axis y-axis z-axis。

        属性值：

                x-axis:定义视图被置于x轴何处。可能值：left，center，right，length，%。

                y-axis:定义视图被置于y轴何处。可能值：top，center，bottom，length，%。

                z-axis：定义视图被置于z轴何处。可能值：length。

三、perspective

        让元素获得透视效果。

        perspective：number|none

        主流浏览器都不支持，谷歌加-webkit-，或在长度后面加单位。

---

四、rotateZ

        使元素饶z轴旋转。

 五、transition过渡动画

        transition：作用属性 整个过程时间  元素过渡状态 延迟的时间；

        1. transition-timing-function规定过渡的状态

        属性值：ease（先慢后快再慢）

                        linear（匀速）

                        ease-in（从慢到快）

                        ease-out（由快到慢）

                        ease-in-out（开始和结束慢）

---

         2.transition-delay规定延迟时间

                属性值：ms|s

---

     

六、定义关键帧

        @keyframes规则会使动画在特定的时间逐渐从当前样式更改为新样式。

        @keyframes name{

                from{样式一：background-color：red}

                to{样式二：yellow}

                }

        调用属性：animation：名字 时间 次数 播放方式