1.四种基本变形
位移变换:translate和所有以transla开头的函数都支持位移变换。
旋转变换:rotate和所有以rotate开头的函数都支持旋转变换。
缩放变换:scale和所有以scale开头的函数都支缩放变换。
倾斜变换:skew和所有以skew开头的函数都支持倾斜变换。
transform:translateX(Npx);沿X轴移动
transform:translateY(Npx);沿Y轴移动
transform:translateZ(Npx);沿Z轴移动
transform:rotate(Npx);旋转
transform:rotateZ(Npx);旋转
transform:rotateX(Npx);绕X轴旋转
transform:rotateY(Npx);绕Y轴旋转
transform:rotateX(Npx) rotateY(Npx);绕X、Y轴同时旋转
transform:scaleX(X);沿X轴缩放//其中的X值通常为0~N之间,例如0.8即为缩小到原来大小的0.8,1.2即为扩大到原来的1.2
transform:scaleY(X);沿Y轴缩放
transform:skewX(Npx);沿X轴倾斜
transform:skewY(Npx);沿Y轴倾斜
新增的3D变换:
transform-style属性: 设置给父元素.
transform-style: 指定是否在3D空间内正确的呈现元素的“遮挡”等嵌套关系.
flat: 不保留子元素的3D位置.
preserve: 子元素将保留3D位置
backface-visibility属性: 设置元素转到背面时是否可见.
visible: 背面时可见的.
hidden: 背面是不可见的.
2.Transition动画
transition-property: 指定对元素的哪个CSS属性进行平滑的渐变处理,该属性可以指定 background-color、width、eight等各种标准的CSS属性.
transition-duration: 指定属性平滑渐变的持续时间.
transition-timing-function: 指定渐变的速度: 该部分支持如下几个值:
ease: 动画开始时较慢,然后速度加快,到达最大速度后再减慢速度.
linear:线性速度.
ease-in: 动画开始时速度慢,然后速度加快.
ease-out: 动画开始时速度很快,然后速度减慢.
ease-in-out:动画开始时较慢,然后速度加快,到达最大速度后再减慢速度.
transition-delay: 指定延迟时间.
transition:left 5s linear;/实例
3.Animation动画
animation-name:指定动画名称.
animation-duration: 指定动画的持续时间.
animation-timing-function: 指定动画的变化速度.
animation-delay: 指定动画延迟多长时间才开始执行.
animation-iteration-count: 指定动画循环的次数.
@keyframes fkjava{
0%{
属性值
}
...............
100%{
属性值
}
}
div{
animation-name:fkjava;
animation-duration:5s;
animation-interation-count:1;/ /infinite表示动画循环的次数为无限次
}