渐变、转换、立体呈现、过渡

位移、转换

1. 空间位移

   简写（不需要的轴设置为0）：

   transform: translate3d(x, y, z);

   transform: translate3d(10px, 0, 10px);

   等同于（用空格隔开）：

   transform: translateX(100px) translateY(100px) translateZ(100px);

   （默认情况无法观察到Z轴位移,需添加下面的透视属性）

2. 空间转换（ 3D转换 ）

   从坐标轴角度定义。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

过渡

1. 过渡有四个属性

2. 想要过渡的 css属性名 (例如width宽 height高) all是所有

    transition: width 2s;
   

3. 过渡持续的时间

   transition-duration:  1s;   /* 持续一秒 */
   

4. 过渡的延迟时间

   transition-delay: 3s;  /* 延迟3秒 */
   

5. 过渡的速度曲线

   transition-timing-function: steps(4);   /* 步顿为4 */
   transition: all 1s;  
   

透视

1. perspective属性

2. perspective: 值;

3. 问：默认情况下，为什么无法观察到Z轴位移效果？

   答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果 （需要添加perspective）

4. 近大远小、近清楚远模糊

5. perspective属性 添加给父级

6. 取值：像素单位数值， 数值一般在800 – 1200。 一般取值为1000

7. 作用 ： 空间转换时，为元素添加近大远小、近实远虚的视觉效果

8. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕****的距离

空间旋转

1. 使用rotate实现元素空间旋转

2. 左手法则

   判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

3. rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角 ， x，y，z 取值为0-1之间的数字

立体呈现

空间内，转换元素都有自已独立的坐标轴，互不干扰

1. 方法：添加 transform-style: preserve-3d ;
2. 使子元素处于真正的3d空间
3. 给盒子父元素添加transform-style: preserve-3d；
4. 按需求设置子盒子的位置（位移或旋转）

空间缩放

1. 使用scale实现空间缩放效果

2. transform: scale3d(x, y, z);

   transform: scaleX(倍数);

   transform: scaleY(倍数);

   transform: scaleZ(倍数);