今日学习总结，2D位移，缩放，旋转，斜切扭曲，过渡，动画

标签：

(一)2D 位移，缩放，旋转，斜切扭曲；
位移：
transform:translate(?px,?px)
不影响其他的布局，只对自己设置的起作用
缩放：
transform:scale(.5,.5) 括号里代表的是百分比。
参照点默认中心点
旋转:
transform:rotate(45deg)括号里表示度数45°也可以使用弧度rad
顺序为顺时针顺序
斜切扭曲：
transform:skew(x,y)分别表示X，Y轴不不同程度，可以用弧度也可以用度数
参照点坐标:
transform-origin(x,y)
重置原点，以这个原点来完成位移、缩放、旋转、斜切扭曲。

（二）过渡:transition:all(过渡的地方)4s（周期）function（效果类型）2s（延迟时间）
效果类型
线性过渡:linner
平滑过渡：ease
由慢到快：ease-in
由快到慢：ease-out
由慢到快再到慢：ease-in-out
《需要定义最初的大小位置，以及最后到达的位置属性；还可以加入最初到最后的类型，比如旋转等；》

（三）动画 animation：name(动画名) time（周期）function(类型) number(次数）（infinite无限)
@keyframes name { 30%{}
50%{} } 申明一个动画以及名称；里面随意定义；
name: none 不定义动画名称 <identifier>： 多个动画名称，用li来表示；
《也是需要定义最初的状态，还有动画执行中30%{}，50%{},这样来表示动画执行到某个时段的状态》

今日学习总结，2D位移，缩放，旋转，斜切扭曲，过渡，动画

标签：

原文地址：http://www.cnblogs.com/luoyao19910515/p/4643817.html