一.2D转换

1.2D转换之translate移动

表示方法：

transform：translate();

transform：translateX();

transform：translateY();

注意

1.X就是x轴上移动位置， Y就是在y轴上移动位置 中间用逗号分隔

2.translate里面的参数是可以用% 或用px

3.如果里面的参数时% 移动的距离是盒子自身的宽度或者高度来对比的

2.2D转换之rotate旋转

表示方法：

transform：totate();

transform：totateX();

transform：totateY();

注意

1.transform：rotate（度数） 单位是deg

2.角度为正时顺时针，负时为逆时针

3.默认旋转的中心点是元素的中心点

4.2D设置旋转中心点 transform-origin

transform-origin: X Y;

注意

1.后面的参数 x和y用空格隔开

2.xy默认转换的中心点是元素的中心点(50%,50%) 等价于center center

3.还可以X Y设置像素或者方位名词(top bottom left right center)

可以跟方位名词

例如：将旋转点设置为左下角

transform-origin: left bottom;

也可以跟px像素

例如：将旋转点设置为几像素

transform-origin: 100px 100px;

3.2D转换之scale缩放

transform：scale（x.y);

注意

1.X和Y用 . 隔开

2.括号内数字顺序：宽度，高度

例如：宽和高都放大一倍，相当于没有放大

transform:scale(1.1);

例如：宽和高都放大两倍

transform：scale（2.2);

例如:只写一个参数，第二个参数则和第一个参数一样，相当于scale（2，2)

transform：scale（2);

例如：缩小

transform:scale(0.5,0.5);

3.里面写的数字不跟单位

4.数字就是倍数的意思 1就是一倍

6.scale缩放最大优势：可以设置转换中心点缩放，默认以中心点缩放的的，而且不影响其他盒子

4. 2D转换综合写法

有时2D转换需要多种属性，为方便书写，故有综合写法(同时使用多个转换)如下：

transform：：translate（） rotate（） scale（）;

注意

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

2.当我们同时有有位移和其他属性时，记得要将位移放到最前面

一.3D转换

1.什么是3D

3D就是由长、宽、高三个维度所构成的空间

三维坐标系:

X轴：水平向右 X右边是正值，左边是负值

Y轴：垂直向下 Y下面是正值，上边是负值

Z轴：垂直屏幕 往外面是正值，往里面是负值

2.3D位移之translate

仅仅是在X轴上移动

transform：：translateX();

仅仅是在Y轴上移动

transform：：translateY() ;

仅仅是在Z轴上移动

transform：：translateZ() ;

注意

1.3D移动有简写方法

transform：translate3d(X,Y,Z) ;

2.X Y Z 不能省略 如果没有就写0

3.3D旋转rotate

transform：rotateX() ;

Y轴 Z轴也同理

注意

3D旋转有简写方法

transform：rotate3d(45deg) ;

4.透视perspective

表示方法：

perspective：400px ;

注意

1.若想在网页产生3D透视效果需要透视

2.透视也可叫视距：就是人的眼睛到屏幕的距离

3.距离视觉点越近的在电脑上成像越大，越远成像越小

4.在2D平面产生近大远小（距离越近，成像越大，反之）的视觉立体 但是只是效果是二维的

5透视单位是像素

6.透视写在被观察元素的父盒子上

d:就是视距，视距就是一个距离人的眼睛到屏幕的距离

z：就是Z轴，物体距离屏幕的距离，Z轴越大（正值）我们看到的物体就越大

五：3D呈现 transform-style

表示方法：

transform-style：presever-3d ;

注意

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

2.transform-style:flat子元素不开启3d立体空间 默认的

3.transform-style：presever-3d；子元素开启立体空间

4.代码写给父级，但是影响的是子盒子

5.这个属性很重要，后面必用

三.CSS动画

一.用keyframes定义动画（类似定义类选择器）

1.动画序列：0%是动画开始，100%是动画完成，这样的规则就是动画序列

2.元素使用动画

表示方法：

   div {
      width；200px;
      hight:200px;
      background-color:pink;
      margin:10px;
      animation-name :动画名称; (  调用动画)
      animation-duration :持续时间; (持续时间)
  }

@keyframes 动画名称
      0%{
          width:300px;
      }
      100% {
          wodth:200px;
      }
  }
  

注意

1.在@keyframes中规定某项css样式，就能创建新样式的动画效果

2.变化发生的时间也可用'from'和'to' 等同于0%和100% 里面百分比得用整数

3.可以做多个状态的变化 keyframes关键帧变化

4.里面的百分比就是总的时间的划分25%*10=2.5s

二.动画属性

1.规定动画

@keyframes

2.所有动画的简写属性,除了animation-play-state的属性

animation

3.规定@keyframes动画的名称(必须写)

animation-name

4.持续时间 默认为0 (必须写)

animation-duration

5.动画的速度曲线默认是'ease'

animation-timing-function

6.规定动画何时开始默认为0

animation-delay

7.规定动画播放次数 默认为1 还有infinite(无限循环)

animation-iteration-count

8.规定动画是否在下一周期逆向播放默认是'normal',alternate逆播放

animation-direction

9.规定动画是否正在运行或暂停,默认是'running' 和 'pause'

animation-play-state

10.规定动画结束后状态 保持forwards 回到起始backwards 放在:hover里

animation-fill-mode

11.CSS的综合写法：

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

例如：

animation: myfirst 5s linear 2s infinite alternate;

注意

1.动画名称 和 持续时间必须写

2.关于速度曲线之step步长

steps（步数） ：指定了时间函数中的间隔数量（步数）

steps就是分几步来完成我们的动画 有了steps 就不用写 linear 或者 ease