详细内容
形变transform
- CSS transform属性允许你旋转，缩放，倾斜或平移给定元素。
- 常见的函数trasform function有：
- 平移：translate(x,y)
- 缩放：scale(x,y)
- 旋转：rotate(deg)
- 倾斜：skew(deg,deg)
位移-translate
- 平移：translate(x,y)
- 值个数：
- 一个值时，设置x轴上的位移
- 二个值时，设置x轴和y轴上的位移
- 值类型：
- 数字：100px
- 百分比：参照元素本身（refer to the size of bounding box）
缩放-scale
- 缩放：scale(x,y)
- 值个数：
- 一个值时，设置x轴上和y轴相同的缩放
- 二个值时，设置x轴和y轴上的缩放
- 值类型：
- 数字：
- 1：保持不变
- 2：放大一倍
- 0.5：缩小一半
- 百分比：不支持百分比
- 数字：
transform-origin
- transform-origin：变形的原点
- 一个值：
- 设置x轴的原点
- 两个值：
- 设置x轴和y轴的原点
- 必须是
, ,或left,center,right,top,bottom关键字中的一个 - left,center,right,top,bottom关键字
- length：从左上角开始计算
- 百分比：参考元素本身大小
旋转-rotate
- 旋转：rotate(deg)
- 值个数：
- 一个值时，表示旋转的角度
- 值类型：
- deg：旋转的角度
- 正数为顺时针
- 负数为逆时针
- 注意：旋转的原点受transform-origin的影响
倾斜(拉伸)-skew
- 旋转：skew(x,y)
- 值个数：
- 一个值时，表示x轴上的倾斜
- 二个值时，表示x轴和y轴上的倾斜
- 值类型：
- deg：旋转的角度
- 正数为顺时针
- 负数为逆时针
- 注意：旋转的原点受transform-origin的影响
过度动画-transition
- transition CSS属性是transition-property , transition-duration , transition-timing-functiong 和 transition-delay的一个简写属性
- transiton-property：指定应用过度属性的名称
- 可以写all表示所有可动画的属性
- 属性是否支持动画查看文档
- transition-duration：指定过度动画所需的世界
- 单位可以是秒（s）或毫秒（ms）
- transition-timing-function：指定动画的变换曲线
- transition-delay：指定过度动画执行之前的等待世界
animation属性
- CSS animation属性是animation-name,animation-duration,animation-tming-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode和animation-play-state属性的一个简写属性形式
- animation-name：指定执行哪一个关键帧动画
- animation-duration：指定动画的持续时间
- animation-timing-function：指定动画的变化曲线
- animation-delay：指定延迟执行的世界
- animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画
- animation-play-state：指定方向，常用值normal和reverse
- animation-fill-mode：执行动画最后保留那一个值
- none：回到没有执行动画的位置
- forwards：动画最后一帧的位置
- backwards：动画第一帧的位置
- animation-play-state：指定动画运行或者暂停（在JavaScript中使用，用于暂停动画）
3D动画
- CSS实现3D：
- transform-style:preserve-3d
- perspective：视距
- JS实现3D的库
- three.js
