7月13号CSS3学习总结

标签：

2D转换: 位移, 缩放, 旋转, 斜切

            位移 ：

            -webkit-transform: translate(10px, 10px);

            缩放：

            -webkit-transform: scale(.5, .5);

            重置原点：

            -webkit-transform-origin: 50px 0;

            旋转:  deg表示度数

            -webkit-transform: rotate(1deg);

斜切,扭曲：

            -webkit-transform: skew(1rad, 1rad)；

过渡：线性过渡，平滑过渡，由慢到快，由快到慢，由慢到快再到慢

线性过渡：  

-webkit-transition: all 4s linear;

平滑过渡：   

-webkit-transition: all 4s ease;

由慢到快： 

-webkit-transition: all 4s ease-in;

由快到慢： 

 -webkit-transition: all 4s ease-out;

由慢到快再到慢：

-webkit-transition: all 4s ease-in-out;

动画：

设置动画每一部分的效果：

@keyframes 动画名  {

            30% {

                效果

            }

50% {

                效果

            }

100% {

                效果

            }

        }

            将动画呈现出来：

 /*-webkit-animation: myfirst 4s ease infinite;*/

7月13号CSS3学习总结

标签：

原文地址：http://www.cnblogs.com/shanhaihong/p/4643971.html