Css学习笔记-过渡属性和css2D

一、过渡属性 transition
1. transition-property：设置参与过渡的属性。属性值可以设置一个或者多个属性。
2.transition-duration： 设置过渡时间
3. transition-delay：设置延迟过渡时间
4. transition-timing-function:设置过渡的动画类型 如下
linear 匀速
ease 默认值：逐渐慢下来
ease-in 加速
ease-out 减速
ease-in-out 先加速再减速

       复合式写法：transition:2s  linear    1s   all
                           使用过渡时间和延迟时间的顺序不能互换，
                           2s是过渡时间      1s是延迟过渡时间
                          过渡时间一般是写给元素的初始状态里。

二、2D transform
2D的功能函数
1.2D位移 translate()
可分为 ：x轴和y轴
当属性值为正值时，是向右或者向下移动，为负值时，是向左或者向上移动。
属性值可以用px 也可以用%
2.2D缩放 scale()
属性值不需要加单位 0—1是缩小的效果，大于1是放大的效果。
scale（值1） 水平和垂直
scale（值1）（值2） 值1是水平方向 值2是垂直的方向
x轴是水平方向缩放比例
y轴是垂直方向缩放比例
3.2D旋转 rotate（）
属性值单位是度（deg）
只能放一个属性值，正值为顺时针，负值为逆时针。
rotate() 中心点旋转
rotateX（） x轴旋转
rotate Y（） y轴旋转
4.2D倾斜 skew（）
属性值单位是度(deg) 属性值为正值：向左或者向上倾斜 为负值：向右或者向下倾斜
skew(值1) 沿x轴倾斜
skew（值1，值2）值1为x轴
值2为y轴
skewX() 沿x轴
skewY() 沿Y轴
5.原点设置属性 transform-origin
为值1和值2分别是 ： 水平和垂直
6.backface-visibility: 隐藏被旋转的div元素的背面
backface-visibility:visible 可见
backface-visibility:hidden 不可见