CSS5

2D/3D转换

1.translate(平移)，rotate(旋转)，scale(缩放)，skew(斜切扭曲)，matrix(组合操作)

   transform-orign（设置中心点）:left(水平)  top(垂直)

  例：平移：transform:translate(px);

          旋转：translate:rotatex(deg) rotatey(deg),可为负数

          缩放：transform:scale(两个值，可为负数)

          斜切扭曲：transform:skew(x轴，y轴，单位 deg)

过度与动画

过度transition：1.property（过度属性 ）:{a.all所有进行过度，默认值   b.none 不指定过度的属性  c.有多个属性值，用逗号分开}

                  2.duration(持续时间)

                  3.-timing-function(过渡中的动画类型):{a.linear线性过度  b.ease平滑过渡 ,ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快再到慢} 参用了贝塞尔曲线

                  4.delay:延迟过度时间

可连接着写：例：.div2{transition:width 2s,transform 2s ease out 0.5s border-radius,5s};  .div2:hover{width:200px;  border-radius:50%}

重点：要实现以上效果，需加上hover

动画animation:1.name(设置对象所应用的名称)，必须和@keyframes name {}使用

                       2.duration(持续时间)

                       3.-timing-function(过渡中的动画类型):{a.linear线性过度  b.ease平滑过渡 ,ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快再到慢} 参用了贝塞尔曲线

                       4.delay(延迟时间 )

                       5.-iteration-count(循坏次数)>=1的整数：{a.infinite无限循环 b.number指定动画具体循环次数}

                       6.direction(是否反向运动)：alternate正常与反向交替

                       7.-play-state(检所设置动画的状态)：{a.running运动 b.paused暂停} 不推荐 使用

                       8.-fill-mode（检索对象动画时间之外的状态）：{a.forwards结束时的状态 b.both结束或开始的状态 c.backwards 开始时的状态}

                       只写前六个就可以

合并写法：animation:name 5s ease 0.2s infinite alternate,只写出前两个就可以了。