CSS的2D3D动画

CSS

CSS3

2D

2D转换 移动

translate 改变元素在页面中的位置 类似定位（且不会影响其他盒子）

transform:translate(x,y);

或

transform:translateX(n);
transform:translateY(n);

xy可以为百分比 填入百分比是相对于自身元素尺寸translate（50%，50%）；

注：对行内标签没有效果

2D转换 旋转

rotate 使元素在页面中按设定的焦点旋转

transform:rotate(度数);

rotate里面跟度数，单位是deg（度数degree）

 角度为正时顺时针

 角度为负时逆时针

注：默认焦点是元素正中心

2D转换 缩放

设置元素的放大缩小

transform:scale(x,y);
transform:scale(1,1);宽高放大一倍 相当于没放大
transform:scale(2,2);宽高放大两倍
transform:scale(0.5,0.5);缩小一倍

  数值相同可以简写成transform:scale(2);

参数：
大于1 放大倍数
等于1 不变化
大于0 小于1 缩小
等于0 隐藏
小于0 先缩小到隐藏再放大的倍数 同时旋转180deg

注：可以设置焦点缩放，默认以中心点缩放，不会影响其他盒子；

2D转换 倾斜

设置元素的倾斜程度

transform:skew()；
transform:skewX()；
transform:skewY()；

skewX的角度为与y轴之间的角度
skewY的角度为与x轴之间的角度

2D综合写法

可以同时使用多个转换：transform:translate() rotate() scale()…等，

其顺序会影响转换效果（先旋转会改变坐标轴方向）

注：同时有多个属性位移放最前面

2D转换 焦点

transform:origin(x y);

xy默认转换的中心点是元素的中心点（50% 50%）

还可以给x y设置像素或者方位名词（top bottom left right center）

过渡

控制元素从一种状态变化到另外一种状态（display:none/block不可以使用过渡）

1. transition-property： 检索或设置对象中的参与过渡的属性
2. transition-duration： 检索或设置对象过渡的持续时间
3. transition-delay： 检索或设置对象延迟过渡的时间
4. transition-timing-function：检索或设置对象中过渡的动画类型

简写

transition：要过渡的属性 花费时间 运动曲线 何时开始；（谁过渡给谁用！！！）

1.属性 ：想要变化的css属性，宽高颜色内外边距 所有属性都要变换用all

        想写多个属性用逗号分割 eg：transition:width .5s,height .5s;

2.花费时间：单位是秒 1s（0.5s可以写成.5s）

3.运动曲线：

      linear 匀速

      ease 逐渐慢下来(默认)

      ease-in 加速

      ease-out 减速

      ease-in-out 先加速后减速

4.何时开始：单位必须是秒 可以设置延迟触发时间 默认是0s（可以省略）

3D

3D转换

三维坐标轴

x 水平向右 右边是正值 左边是负值

y 垂直向下 下面是正值 上面是负值

z 垂直屏幕 往外面是正值 往里面是负值

3D位移

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

仅仅在x轴上移动

transform:translateX(100px);

仅仅在y轴上移动

transform:translateY(100px);

仅仅在z轴上移动（注意：translateZ一般用px单位）

transform:translateZ(100px);

简写

transform:translate3d(x,y,x);

其中x、y、z分别指要移动的轴的方向的距离（xyz是不能省略的，如果没有就写0）

3D旋转

 3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

 元素旋转按照左手准则 大拇指为正方向 手指弯曲为角度正值旋转方向

语法

沿着x轴正方向旋转45度

 transform:rotateX(45deg);

沿着y轴正方向旋转45度

transform:rotateY(45deg);

沿着z轴正方向旋转45度

transform:rotateZ(45deg);

沿着自定义轴旋转deg为角度

 transform:rotate3d(x,y,z,deg);

  xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转角度

eg：沿着x轴旋转45度

   transform:rotate3d(1,0,0,45deg);

     沿着对角线旋转45度

   transform:rotate3d(1,1,0,45deg);

3D 缩放

设置元素的放大缩小

transform:scale3d(x,y,z);

x,y,z内的值为对应坐标轴上缩放的倍数

透视

perspective:500px;（添加在父级）

transform:perspective:500px;（添加在子级,容易被其他transform覆盖）

在2D平面产生近大远小的视觉立体

如果要网页产生3D效果需要透视

距离视觉点跃进的电脑平面成像越大，越远成像越小

透视要写在被观察元素的父盒子上面 单位是像素

注：当父盒子带着子元素一起旋转时 3D呈现 给父盒子 ； 透视（3D呈现（看需要））给父盒子的父盒子

3D呈现

控制子元素是否开启三维立体环境

 transfrom-style:preserve-3d;

子元素不开启3d立体空间 默认的

 transfrom-style:flat;

子元素开启立体空间

 transfrom-style:preserve-3d;

透视要写在被观察元素的父盒子上面，但是影响的是子盒子

背面不可见

backface-visibility:hidden;(背面不可见)

动画

1.定义动画

​ 用@keyframes定义动画（类似定义类选择器）（有@！！！！）

@keyframes 动画名称{
          0%{ width：100px；}
          100%{width：200px；}
​              }

注：0%跟100%可以用from跟to代替 但0%跟100%可以分割成多个部分做成动画序列（10% 20%…）

2.调用动画

   div{animation-name:动画名称（调用动画）;
       animation-duration:持续时间（持续时间）;}

动画属性

@keyframes  规定动画

animation    所有动画属性简写 除了animation-play-state属性

          一个元素添加多个动画时不能分两个animation 应该在第一个结束时逗号隔开（无需分号）

animation-name   规定@keyframes动画的名称（必须）

animation-duration   规定动画完成一个周期所花费的时间 （ 秒或毫秒 ） 默认是0（必须）

animation-timing-function  规定动画的速度曲线，默认是"ease"（参照2d过渡）

           steps（）步长（规定时间函数中间隔数量） 有step就不用ease 分几步走完动画

animation-delay      规定动画何时开始，默认是0

animation-iteration-count   规定动画被播放的次数，默认是1，可以设置成infinite循环

animation-direction    规定动画是否在下一周期逆向播放
默认是"normal", 还有"alternate" 一次正序一次逆序 ，"reverse"逆播放

animation-play-state    规定动画是否正在运行或暂停，默认是"running" 可以设置成"pause"（一般配合hover）

animation-fill-mode    规定动画结束后状态，保持forwards 回到开始处backwards

动画简写

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画开始或者结束状态

animation:mov 5s linear 2s infinite alternate;

简写属性不包括animation-play-state

注：

设置方向的属性值一定要相同(left:0 => left:400px)

想要动画走回来而不是跳回来

animation-direction:alternate; 

动画结束后停在结束位置

animation-fill-mode:forwards;