CSS33D转换与动画详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_57564064/article/details/129358119

一、空间转换 3D

3D坐标系

3D 坐标系比2D 多了一个Z轴。

一定要记住3个坐标轴取值的正反：
X 轴往右越大，是正值，否则反之
Y 轴往下越大，是正值，否则反之
Z轴（指向我们）越大，是正值，否则反之

3D位移

完整写法：

transform: translate3d(x, y, z);

只不过在很多情况下，我们经常喜欢分开写：

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

透视

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

语法:perspective: 值;

perspective: 800px;

透视注意事项：

取值范围经常在 800px ~ 1200px 之间。

一定给父亲添加

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

其中 d 为透视的距离

z 是 translateZ 的距离，这个距离靠近我们，盒子越大

3D旋转

有了透视的加持，我们3d旋转效果会比较明显。

rotateX

类似单杠旋转。

注意：默认的旋转中心在盒子的中心位置。

body {
     /* 父级添加透视 */
     perspective: 400px;
}
img {
    transition: all1s;
}

img:hover {
    transform: rotateX(360deg);
}

rotateY

类似钢管舞。

body {
    perspective: 400px;
}
img {
    transition: all1s;
}
img:hover {
    transform: rotateY(360deg);
}

左手法则

一定要搞清楚X轴和Y轴如何旋转的，旋转的度数是正值还是负值。

规则：

大拇指指向X轴正向方（右），则四指指向的方向是旋转的方向

大拇指指向Y轴正向方（下），则四指指向的方向是旋转的方向

拓展

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

x，y，z 取值为0-1之间的数字

空间缩放

语法

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

transform: scale3d(x, y, z);

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加

transform-style: preserve-3d;

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

默认值flat, 表示子元素处于2D平面内呈现

注:perspective只增加近大远小、近实远虚的视觉效果。

3D导航案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1.搭建结构,3个盒子,父盒子套2个子盒子 
           2.使用定位让盒子重合在一起,显示蓝色盒子
           3.打开3d环境,位移绿色盒子,往前移动,z轴移动
           4.查看盒子的位置,通过旋转父元素,记得加过渡
           5.调整后面蓝色盒子方向,往上移动,并且要沿着x轴翻转90度
        */
        .box {
            float: left;
            /* 开启3d效果 */
            transform-style: preserve-3d;
            position: relative;
            width: 120px;
            height: 50px;
            margin: 100px auto;
            transition: all 1s;
        }

        .box:hover {
            transform: rotateX(-90deg);
        }

        .box span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 50px;
            color: #fff;
            background-color: green;
        }

        .box span:first-child {
            /* 位移的距离一般推荐为高度的一半 */
            transform: translateZ(25px);
        }

        .box span:last-child {
            /* 盒子需要翻转90度,到了前面盒子中间,位移盒子向上为高度的一半 */
            transform: translateY(-25px) rotateX(90deg);
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>首页</span>
        <span>index</span>
    </div>
    <div class="box">
        <span>首页</span>
        <span>index</span>
    </div>
    <div class="box">
        <span>首页</span>
        <span>index</span>
    </div>
</body>

</html>

二、动画（重点）

过渡可以实现2个状态间的变化过程

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

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

定义：

/* 1. 定义的动画 */
@keyframes dance {

    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }
}

或者是

/* 1. 定义的动画 */
    @keyframes dance {

       0% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

调用

img {
    width: 200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}

动画属性

动画名字参照css类选择器命名

动画时长和延迟时间别忘了带单位 s

infinate 无限循环动画（重复次数）

alternate 为反向就是左右来回执行动画（跑马灯）

forwards 动画结束停留在最后一帧状态，不循环状态使用

linear 让动画匀速执行

注意点:动画的结束状态无法和动画的重复次数以及动画的方向一起使用

动画分类

补间动画和逐帧动画

鼠标经过暂停动画

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {
    animation-play-state: paused;
}

多组动画

使用steps实现逐帧动画

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

animation-timing-function: steps(N)；

将动画过程等分成N份

精灵动画制作步骤

准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

定义动画

改变背景图的位置（移动的距离就是精灵图的宽度）

使用动画

添加速度曲线steps(N)，N与精灵图上小图个数相同

添加无限重复效果

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 3s linear forwards;

360浏览器官网-案例