移动web day2 | 3D转换、动画

目录

1.1 空间位移

1.2 透视

1.3 空间旋转 

1.4 立体呈现

1.5 3D导航

1.6 3D缩放

2 动画

2.1 介绍

2.2 实现步骤

---

1 3D转换

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

• 空间：是从坐标轴角度定义的。

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

• 空间转换也叫3D转换
• 属性：transform (同2D)

1.1 空间位移

• 语法:

   transform: translate3d(x, y, z);
   transform: translateX(值);
   transform: translateY(值);
   transform: translateZ(值);
   transform: translateX(值) translateY(值) translateZ(值);
  

• 取值（正负均可）
  ◇ 像素单位数值
  ◇百分比

1.2 透视

• 思考：默认情况下，为什么无法观察到Z轴位移效果？

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

• 原理:通过近大远小,近清晰远模糊来实现3维变化效果
• 属性（添加给父级）
  Ø perspective: 值;
  Ø 取值：像素单位数值， 数值一般在800 – 1200(适宜数值)。
• Ø 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

1.3 空间旋转 

• 语法(可合并写)

   transform: rotateZ(值);
   transform: rotateX(值);
   transform: rotateY(值);

• 判断旋转方向: 左手握住旋转轴(X/Y/Z), 拇指指向正值方向, 手指弯曲方向为旋转正值方向

注意:正值时手心向轴,负值时手心向自己

X轴:正值从下往上(内)翻

Y轴:正值从左向右翻

Z轴:正值顺时针(rotate默认沿Y轴旋转)

•  拓展

Ø rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

        以原点和坐标的连线为坐标轴.

Ø x，y，z 取值为0-1之间的数字(无单位)

1.4 立体呈现

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

• 思考：使用perspective透视属性能否呈现立体图形？

        答：不能，perspective只增加近大远小、近实远虚的视觉效果。

• 实现方法

        Ø 父盒子添加 transform-style: preserve-3d;

        默认值(flat)二维空间

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

• 呈现立体图形步骤

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

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

• 注意:

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

1.5 3D导航

 思考：绿色和橙色盒子是如何摆放的？

• 搭建立方体

        Ø 绿色盒子是立方体的前面

        Ø 橙色盒子是立方体的上面

• 结论： 绿色和橙色部分共需要3个标签

        1个父级标签

        绿色和橙色共2个标签（子级）

• 实现思路

        1. 搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面

        2. 添加hover状态旋转切换效果

         注意:可以给li加一个旋转属性【rotateX(-30deg)  rotateY(-30deg)】便于观察，之后删掉即可。

1.6 3D缩放

scalex scaleY scaleZ

transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);

---

2 动画

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

2.1 介绍

• 思考：过渡可以实现什么效果？

        答：实现2个状态间的变化过程

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

2.2 实现步骤

1 定义动画

        /* @keyframes 动画名称 */
        @keyframes move {
            from {
                background-color: aquamarine;
                transform: translate(0);
                border-radius: 0%;
            }

            to {
                transform: translate(300px, 200px);
                background-color: yellowgreen;
                border-radius: 50%;
            }
        }

or 

2 调用动画

注意：

        Ø 动画名称和动画时长必须赋值

        Ø 取值不分先后顺序

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

属性	取值
animation-name                                 动画名称
animation-duration                               动画时长
animation-delay                                 延迟时间
animation-fill-mode            动画执行完毕时状态	forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function                    速度曲线	steps(数字)：逐帧动画 开发中，一般配合精灵图实现动画效果。 linear 匀速;        rase(默认):减速
animation-iteration-count                     重复次数	当同时设置alternate属性时,2次为1个来回        infinite为无限循环
animation-direction                       动画执行方向	alternate为反向
animation-play-state                            暂停动画	paused为暂停，通常配合:hover使用

        .box {
            /* 二 调用动画 */
            /* 1 动画名称 */
            animation-name: move;
            /* 2 动画播放时间 */
            animation-duration: 3s;
            /* 3 动画播放次数 默认值一次 infinite无限次*/
            animation-iteration-count: 3;
            /* 4 动画延迟 等多久才开始 */
            animation-delay: 0s;
            /* 5 速度曲线 默认ease(减速);   linear(匀速)*/
            animation-timing-function: linear;
            /* 6 动画执行方式 alternate反向播放(逆播),即回去的时候也播放 */
            animation-direction: alternate;
            /* 7 动画执行完毕状态 与infinite冲突 默认backwards(第一帧); forwards(结束); */
            animation-fill-mode: forwards;
        }

        .box:hover {
            /* 8 暂停状态 (配合:hover连用)*/
            animation-play-state: paused;
        }