admin管理员组文章数量:1566352
目录
- 1. 动画
- ① 创建
- ② 属性
- ③ 关键帧
- 2. 3D
- ① transform转换
- ② rotate3d
- ③ translate3d
- ④ perspective
- ⑤ transform-style
1. 动画
① 创建
@keyframes // 创建动画
语法：
@keyframes animationname {keyframes-selector {css-styles;}}
keyframes-selector // 动画持续时间的百分比
例：
@keyframes myMove{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
② 属性
animation // 动画属性的简写属性
语法：
animation：name duration timing-function delay iteration-count
name：动画名称duration：动画指定需要多少秒或毫秒完成timing-function：动画效果的速度delay：延时iteration-count：value/infinite；动画播放次数animation-direction:normal|alternate；是否反向播放动画animation-play-state:paused|running；动画正在运行还是暂停
③ 关键帧
animation-timing-function：step-start/step-end
- 指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
- step-start 动画执行时为开始左侧，端点的部分为开始。
- step-end 动画执行时以结尾端点为开始，默认值为 end。
2. 3D
① transform转换
语法：
transform： rotate3d()/ translate3d()
rotate3d(x,y,z,angle)：旋转translate3d(x,y,z)：平移
② rotate3d
rotate3d(x,y,z,angle)
x: 在x轴是否旋转，是为1，否为0；y: 在y轴是否旋转，是为1，否为0；z: 在z轴是否旋转，是为1，否为0；angle：旋转角度；rotateX(angle)：定义沿 X 轴的 3D 旋转。正值前，负值后；rotateY(angle)：定义沿 Y 轴的 3D 旋转。正值右，负值左；rotateZ(angle)：定义沿 Z 轴的 3D 旋转。
③ translate3d
translate3d(x,y,z)；translateX(x)：定义 3D 转化，仅使用用于 X 轴的值；translateY(y)：定义 3D 转化，仅使用用于 Y 轴的值；translateZ(z)：定义 3D 转化，仅使用用于 Z轴的值。
④ perspective
perspective：设置从何处查看一个元素的角度
语法：
perspective: number|none;
number：元素距离视图的距离，以像素计；none：默认值。与 0 相同。不设置透视；Perspective-origin：视点；perspective-origin：50% 50%；表示浏览器从正中心观察这个世界。
⑤ transform-style
transform-style：规定被嵌套元素如何在 3D 空间中显示；
语法：
transform-style: flat|preserve-3d；
flat：表示所有子元素在2D平面呈现；preserve-3d：表示所有子元素在3D空间中呈现。
本文标签： 动画Animationperspectiverotate3dtransform
版权声明：本文标题：CSS3的动画及3D转换（animation、transform、rotate3d 、perspective等）【总结】 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1725895591a1047600.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论