立体+动画

不要图透
303 阅读3分钟

空间转换

  1. **空间：**是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
  2. 空间转换也叫3D转换。
  3. 属性：transform
  4. 空间转换主要内容：
    1. 位移&透视
    2. 空间旋转&旋转方向正负判断
    3. 缩放
    4. 立体坐标系以及立体呈现

位移&透视

位移：

image-20220318202304201.png

语法：
  1. transform: translate3d(x, y, z);
  2. transform: translateX(值);
  3. transform: translateY(值);
  4. transform: translateZ(值)--默认情况下看不见元素在z轴上的变化。
取值：

像素单位数值 / 百分比。

透视：

目的：

为了让设计者以及用户能看到translateZ（值）方向的变化。

介绍：

1、思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？

​ 答：近大远小、近清楚远模糊

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

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

属性（添加给父级）
  1. perspective: 值;
  2. 取值：像素单位数值， 数值一般在800 – 1200。
  3. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
作用：

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

空间旋转&旋转方向判断

1、空间旋转：

语法：
  1. transform: rotateZ(值deg);image-20220318202459129.png
  2. transform: rotateX(值deg); image-20220318202647432.png
  3. transform: rotateY(值deg)；image-20220318202733162.png
  4. transform: rotate3d(x,y,z,角度度数)-- x，y，z 取值为0-1之间的数字。
取值（正负均可）：
  1. 单位（deg）

2、旋转方向判断（左手法则）：

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。image-20220318202754243.png

缩放

介绍：

使立体盒子的长宽高缩放。

语法：

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

效果：

缩放前：

image-20220318203436470.png

代码：

.box {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: skyblue;

            position: relative;

            transform-style: preserve-3d;
            transform: rotate3d(1, 1, 1, 0deg) scale3d(1.2, 1.2, 1.2);
        }

放大后：image-20220318204041359.png

代码：

.box {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: skyblue;

            position: relative;

            transform-style: preserve-3d;
            transform: rotate3d(1, 1, 1, 0deg) scale3d(2.2, 1.2, 2.2);
        }

立体坐标系以及立体呈现

立体坐标系

image-20220318204510087.png

z轴：方向由屏幕里面指向屏幕外面（正）。

立体呈现

介绍：

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

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

实现方法：

*给父元素添加 transform-style: preserve-3d，使子元素处于真正的3d空间

呈现立体图形步骤：
  1. 盒子父元素添加transform-style: preserve-3d；
  2. 按需求设置子盒子的位置（位移或旋转）

代码：

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            position: relative;
            margin: 100px auto;

            perspective-origin: 0px 0px;
            transform-style: preserve-3d;
            transform: rotate3d(1, 1, 1, 22deg);
        }

        .box>div {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.9;
            font-size: 30px;
        }

        ::input-selection {
            background-color: #000;
            color: #fff;
        }

        .front {
            background-color: #ff1703;
        }

        .back {
            background-color: #ffc629;
        }

        .left {
            background-color: #53ff27;
        }

        .right {
            background-color: #18ffe4;
        }

        .top {
            background-color: #0c00ff;
        }

        .bottom {
            background-color: #ff21cb;
        }

        /*将第一个div前移*/

        .front {
            transform: translateZ(100px);
        }

        /*第二个div后移*/

        .back {
            transform: translateZ(-100px) rotateY(180deg);
            /*旋转会影响当前元素所在的坐标系：强烈建议：先移动再旋转*/
            /*transform: rotateY(180deg) translateZ(100px);*/
        }

        .left {
            transform: translateX(-100px) rotateY(-90deg);
        }

        .right {
            transform: translateX(100px) rotateY(90deg);
        }

        .top {
            transform: translateY(-100px) rotateX(90deg);
        }

        .bottom {
            transform: translateY(100px) rotateX(-90deg);
        }

        body {
            perspective: 1000px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">前面</div>
        <div class="back">后面</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
        <div class="top">上面</div>
        <div class="bottom">下面</div>
    </div>
</body>

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

总结：

image-20220318214409764.png

动画

目标：

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

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

使用animation添加动画效果

实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

动画的本质：

  1. 快速切换大量图片时在人脑中形成的具有连续性的画面。
  2. 构成动画的最小单元：帧或动画帧。

实现步骤：

定义动画（两种方式）：

  1. @keyframes 动画名称{
    
           form {
               /*动画开始*/
           }
   
           to {
               /*动画结束*/
           }
       }

  2. @keyframes 动画名称{
     
            0% {
                /*动画开始*/
            }
    
            50%{
                /*动画中段*/
            }

            100% {
                /*动画结束*/
            }
        }

使用动画：

image-20220317094742430.png

 <style>
        div {
            animation: shiyong 2s;
        }

        @keyframes shiyong {
            from {
                width: 200px;
            }

            to {
                width: 500px;
                background-color: skyblue;
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

动画animation的属性：

image-20220318212919423.png

image-20220318212944709.png

image-20220318213022014.png

注意：

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

2 取值不分先后顺序

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

动画属性steps（）：

1、逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

2、animation-timing-function: steps(N)；

  1. 将动画过程等分成N份

3、实际应用：

image-20220318213537222.png

总结：

image-20220318214228170.png

avatar
文章
阅读
粉丝