转换
过渡
-
过渡：transition
-
在之前的学习中，通过hover 直接将元素从一个状态变成另一个状态。
-
学习css3新增了过渡这个属性，可以实现元素不同状态之间的平滑过渡。
-
transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。 必须要写的
transition-duration: 过渡的时间，单位可以是s或者ms。 必须要写的
transition-delay:指定过渡生效的延迟时间。 -
transition-timing-function:
ease 慢慢减速
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
它由多个属性组成，可以用复合写法
过渡属性 完成时间 运动曲线 延迟时间
transition：all 3s linear 1s;
书写时中间用空格隔开【注意】 一般有数值/中间状态的属性才可以设置过渡，比如：width，height
2D转换
缩放、位移、旋转、倾斜
1、缩放:放大，缩小
- 格式：
transform:scale(x,y)
X表示水平方向缩放倍数
Y表示垂直方向缩放倍数
【注意】不会改变元素真实的宽高，也不会对其他元素有影响。
位移 translate
- 格式：
- trangorm：translate（水平，垂直）
属性值：
px 像素
百分比：值是按照盒子本身的宽高计算
【注意】只写一个值时，是水平方向位移
写两个值时
2、旋转 rotate
- 格式：
transform:rotate(角度 )
- 单位：deg
- transform:origin(水平坐标，垂直坐标) 变换原点
- 属性值单位
- px、百分比：按照盒子的宽高、单词：left、right等
3、倾斜 skew
- transform:skew(水平倾斜度，垂直倾斜度)
- 单位：deg 当角度为正值时，顺时针。 负值时，逆时针。
- 【注意】所有转换属性，只能给块状元素，行内元素无效
3D转换
旋转、位移、
1、旋转 rotate 3d
格式：
- transform:rotate 3 d( x,y,z,deg )
- x,y,z 是一个0/1的数值，0表示不旋转，1表示旋转，deg表示旋转的角度。
rotate X（），X轴旋转
rotate Y（），Y轴旋转
rotateZ（） Z轴旋转
旋转方向：左手法则
左手握住旋转轴，大拇指指向旋转的正方向，其他手指的卷曲方向就是旋转的正方向。
透视
perspective： px
- 透视：设置用户眼睛与屏幕的距离，透视效果只是视觉上的效果，不是真正的距离。
- 【注意】设置时，要给变换盒子的容器设置
2、位移
- transform：translate X( 距离px) 沿x轴位移
- transform：translate Y( 距离px) 沿Y轴位移
- transform：translate Z( 距离px) 沿Z轴位移
translate Z为正值，perspective值越小，盒子与你的距离越近，看到的效果也就越大。
translate Z为0，perspective不管怎么变化，盒子上的阴影不变，看到的效果不变。
translate Z为负值，perspective值越小，盒子与你的距离越近，看到的效果也就越小。
翻面隐藏 backface -visibility: hidden;
