CSS3的动画及3D转换(animation、transform、rotate3d 、perspective等)【总结】

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-countvalue/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空间中呈现。

在这里插入图片描述

©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:上身试试 返回首页