1 倾斜 skew
skew(角度) -- skewx(角度)
skew(x,y)
skewx()
skewy()
内容会跟着倾斜
2 偏移 translate
在原来位置上的偏移
值可以设置具体的数值,可以设置百分比(自身宽度 高度的百分比)
translate(偏移值)---translatex()
translate(x,y)
translate3d(x,y,z)
translatex 正值向右,负值向左
translatey 正值向下 负值向上
translatez 正值向前 负值向后
3d空间的透视 transform-style: preserve-3d
3 关键帧动画
创建关键帧动画 @keyframes 动画名称
方式一 : from(初始状态) to(结束动态)
方式二 : 0%(初始状态) 10%(状态二) 20%(状态三) 。。。。100%(结束状态)
4 引入关键帧动画 animation
动画名称
动画执行时间
动画执行次数
动画的运动形式
下一个周期如何运动
动画完成之后保留的状态
动画是否运动
动画的延迟执行时间
5 屏蔽鼠标事件 pointer-events:none
6 隐藏元素的背面
backface-visibility:hidden