前端——移动web

#博学谷IT学习技术支持#

一、空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

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

2、空间转换也叫3D转换

3、属性：transform

（一）空间位移

目标：使用translate实现元素空间位移效果

1、语法

1. transform: translate3d(x, y, z);
2. transform: translateX(值);
3. transform: translateY(值);
4. transform: translateZ(值);

2、取值（正负均可）

1. 像素单位数值
2. 百分比

（二）透视

目标：使用perspective属性实现透视效果

1、属性（添加给父级）

1. perspective: 值;
2. 取值：像素单位数值， 数值一般在800 – 1200。

2、作用

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

（三）空间旋转

目标：使用rotate实现元素空间旋转效果

1、语法

1. transform: rotateZ(值);
2. transform: rotateX(值);
3. transform: rotateY(值);

2、左手法则

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

  （四）立体呈现

目标： 使用transform-style: preserve-3d呈现立体图形

1、实现方法

     添加 transform-style: preserve-3d;

     使子元素处于真正的3d空间

2、呈现立体图形步骤

（1）盒子父元素添加transform-style: preserve-3d；

（2）按需求设置子盒子的位置（位移或旋转）

3、注意

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

（五）空间缩放

1、目标：使用scale实现空间缩放效果

2、语法

1. transform: scaleX(倍数);
2. transform: scaleY(倍数);
3. transform: scaleZ(倍数);
4. transform: scale3d(x, y, z);

二、动画

目标：使用animation添加动画效果

动画效果：

1. 实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
2. 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
3. 构成动画的最小单元：帧或动画帧

实现步骤：

     1.定义动画

        @keyframes 动画名称{

                form{}

                to{}

        }

        @keyframes 动画名称{

                0%{}

                10%{}

                50%{}

                100%{}

        }

     2.使用动画

        animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态

注意：

（1）动画名称和动画时长必须赋值

（2）取值不分先后顺序

（3）如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

三、总结

今天的分享就到这里哦，期待下次交流呦！