CSS3 做一个旋转的立体3D正方形动效核心【前端就业课第二阶段】CSS 零基础到实战（07）

1_bit

发布于 2022-09-19 14:49:18

6860

发布于 2022-09-19 14:49:18

文章被收录于专栏：我的知识小屋

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。

一、transform-origin

transform-origin 用于更改当前元素的中心点，使元素在根据中心点做一些动效使做出更多的姿态。

transform-origin 表示当前元素的基点，使用 transform-origin 可以对目标元素的基点进行设置，在 3D 效果中，transform-origin 可以灵活运用制作出非常舒服的动态效果，给你的页面增加不少的分数。

以下是一个基础的 transform-origin 示例代码：

<!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>动画重点</title>
    <style>
        .main-box {
            width: 100%;
            height: 100%;
            text-align: center;
        }
        
        .base-point {
            transform-origin: 0px 0px;
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: brown;
            transition: transform 1s;
        }
        
        .base-point:hover {
            transform: rotate(30deg);
        }
    </style>
</head>

<body>
    <div class="main-box">
        <div class="base-point">

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

</html>

rotate

在以上的示例中，main-box 用作对主要 div 进行设置，设置其高宽以及其内容水平对齐方式，在此设置水平对齐为居中；随后样式 base-point 用于设置其 main-box 包裹的 div ，设置其 div display: inline-block;，此样式使其能够居中显示，随后设置了宽高、背景色以及过度效果 transition，transition 所监听的变换是 transform，时间是一秒，transform 在之后用于 rotate 旋转角度：

此时基本情况我们已经了解，现在查看 transform-origin: 0px 0px;，这段样式表示设置调用该类的元素的原点在左上角，因为其值为 0px 0px，其中第一个 0px 表示 x，第二个 0px 表示 y，那么我们查看一个 div：

该 div 左上角的位置则是 0px 0px，x 越往右越大，y 越往下越大；接着查看样式 base-point:hover 鼠标悬浮后，使用 transform 设置其元素旋转 45 度，其中 deg 为单位，效果如下：

此时我们可以看到，左上角为一个轴心点，而这个轴心点则是我们定义的基点。

此时我们还可以使用 scale 对其进行缩放，scale 接收两个值，一个是 x 和一个 y，缩放取值0-1之间，若大于 1 则是放大，样式修改如下：

<style>
.base-point:hover {
     transform: scale(1.2, 1.5);
 }
</style>

效果如下：

此时依旧依照左上角进行缩放，我们可以换成右上角，xy 值为 300px 0：

效果如下：

此时我们还可以使用百分比定义基点位置：

此时我们可以给予该元素距离定点一定距离，设置基点为中心（其实基点直接说中心点可能较为容易理解）：

随后效果如下：

transform-origin 除了xy外还有另外一个参数 z，z 表示 z 轴，完整语法：transform-origin: x-axis y-axis z-axis;

需要搞清楚 z 的意思我们先从 rotate、translate 的 3D 值开始。

二、rotate3d

rotate3d：rotate3d() CSS函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。（摘抄）

旋转轴由一组 [x, y, z] 矢量定义，如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果。

空间位置

首先我们得搞清楚这个矢量在CSS 3D转换是什么，矢量在物理学中称作矢量，在数学中称作向量，而咱们使用 rotate3d() 函数输入的 x y z 则是一个矢量位置，矢量位置则是原点（0，0，0）到这个终点的距离。

默认状态下 x y z 为0，在 rotate3d() 中有规定，空值（就是全部xyz值为0）时将会不生效：

<!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>动画重点</title>
    <style>
        .main-box {
            width: 100%;
            height: 100%;
            margin-top: 300px;
            text-align: center;
            position: relative;
        }
        
        .box1,
        .box2 {
            position: absolute;
            width: 300px;
            height: 300px;
            display: inline-block;
            transition: transform 1s;
        }
        
        .box1 {
            /*transform: rotateY(60deg);*/
            background-color: brown;
        }
        
        .box1:hover {
            transform: rotate3d(0, 0, 0, 90deg);
        }
    </style>
</head>

<body>
    <div class="main-box">
        <img class="box1" src="./img/img05.jpg" />

    </div>
</body>

</html>

接着，咱们使第一个 0，也就是 x 表示沿 x 轴进行旋转，若用一个正方体做比方，此时该点应该是在此位置：

效果如下：

我们再把 y 值更改为 1，然后其他值归零：

Z轴：

由此我们可以看出，期中心点在元素中间：

而其中的角度正值表示顺时针旋转，负值表示逆时针旋转，旋转方式如图所示：

从图中我们可以得知，我们以箭头方向形成一个平面，这个平面的顺时针则是该轴角度为正是的顺时针方向。

复杂旋转

此时我们更改 rotate3d 为：

那么此时将会自定义轴，该轴为改点位置与圆心位置连成的直线：

根据该轴进行旋转

若此时将值改成（1，2，0）：

那么对应所产生的轴也会发生变化：

最终的旋转效果如下：

此时我们可以对比，其依照的轴已经发生变化。若此时改动转动位置：

在空间中位置（画得丑，自己可以画一下）将会有一个延伸出来的 3D 轴，那么此时的转动有了 z 轴的参与将会变得更像往下

“盖住”的翻转：

效果如下：

三、使用 CSS 做一个 3d 盒子

为了更好的演示 3d 相关内容，在此使用 css 制作一个 3D盒子。

首先先创建一个 div 使其包裹对应的3d 盒子，在此需要给予一个样式，使其居中并且有一定的 margin ，否则显示起来并不会利于查看：

<style>
.container {
    width: 100%;
    margin: 200px auto;
    text-align: center;
}
</style>

接着在 body下编写 div，使其调用该样式：

<div class="container">
</div>

接下来为 3d 盒子创建一个主要的父容器进行包裹，给予样式；因为我们的外部容器设置了 text-align ，那么其内元素需要居中则需要使用 display 设置 div 为其他类型元素，在此设置为 display: inline-block;，由于在创建 3d 盒子时，需要对其内部进行脱离文档流，需要设置其 postion 为 relative，为其具有 3d 效果在设置 transform-style 为 preserve-3d，在给予对应 background-color ，最后设置其宽高：

<style>
.box {
     display: inline-block;
     width: 200px;
     height: 200px;
     position: relative;
     transform-style: preserve-3d;
     background-color: brown;
 }
</style>

整体代码如下：

此时页面效果如下：

接着，该div这是用于包裹 3d 盒子，在此我们制作3d 盒子是通过对 div 进行翻转，我们需要在这个 div 下创建 6 个 div 表示其 6 个对应的面，并且这 6 个面必须有一定的大小，在此创建一个样式为其设置宽高，以及对应的 position：

接着我们先创建第一个 div 并且调用其样式：

由于每一个面使用不同颜色方便区分，在此我们给予一个背景颜色：

此时页面显示如下：

此时再复制一个 div 作为左侧的盒子面，并且给予对应的背景色：

在此我们可以看到，在给予对应颜色时还使用了 rotate3d 毒气进行沿着 y轴进行转化，但此时页面由于是正视关系，所以看不见，需要移动柜整个盒子的父容器，所以在此我们在 box 样式中添加转动：

此时页面显示如下：

此时我们应该想到，直接使用中心点转化即可完成当前页面的转动使其归于正确的位置：

改变对应的中心点，使其沿着最左侧 Y 轴进行旋转即可完成，效果如下：

接着我们创建右侧的面，一样是创建一个 div，增加一个样式后更改其对应的中心点以及旋转角度进行转换：

效果如下：

此时我们发现当前 3d 盒子有些面不方便查看，直接给予 box 一个 hover，使其可以转换，首先在 box 中增加一个过渡，使其 hover 时能够更好的观察其他面：

接着再编写对应的 hover：

效果如下：

此时被遮挡的区域已经可视，此时咱们继续增加对应的 div 和样式为其增加面，首先制作后面的面，只需要使用 translate 在 Z 轴往后平移与其宽度一样的值即可：

效果如下：

再接着制作 top 和 bottom 的面即可，原理跟以上类似，不过转化轴发生了改变而已，完整代码如下：

<!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>3D Box 1_bit</title>
    <style>
        .container {
            width: 100%;
            margin: 150px auto;
            text-align: center;
        }
        
        .box {
            display: inline-block;
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            background-color: brown;
            transform: rotate3d(1, 1, 0, 65deg);
            transition: transform 1.6s;
        }
        
        .box:hover {
            transform: rotate3d(1, 1, 0, 265deg);
        }
        
        .plane {
            width: 200px;
            height: 200px;
            position: absolute;
        }
        
        .plane-before {
            background-color: chocolate;
        }
        
        .plane-left {
            background-color: crimson;
            transform-origin: 0% 0%;
            transform: rotate3d(0, 1, 0, 90deg);
        }
        
        .plane-right {
            background-color: rgb(220, 20, 203);
            transform-origin: 100% 100%;
            transform: rotate3d(0, 1, 0, -90deg);
        }
        
        .plane-bottom {
            background-color: rgb(20, 80, 220);
            transform-origin: 100% 100%;
            transform: rotate3d(1, 0, 0, 90deg);
        }
        
        .plane-top {
            background-color: rgb(240, 113, 45);
            transform-origin: 0% 0%;
            transform: rotate3d(1, 0, 0, -90deg);
        }
        
        .plane-after {
            background-color: rgb(220, 20, 20);
            transform: translateZ(-200px)
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            <div class="plane plane-before">

            </div>
            <div class="plane plane-left">

            </div>
            <div class="plane plane-right">

            </div>
            <div class="plane plane-after">

            </div>
            <div class="plane plane-bottom">

            </div>
            <div class="plane plane-top">

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

</html>

最终效果如下：

四、scale3d 使用

有了 3d盒子后可以更好的对 3d 盒子进行 Z 轴上的演示。scale3d 接收 x、y、z 3个轴的值作为参数，我们在此演示 z 轴。

在此将 box 的 hover 样式更改为对应的 scale3d：

在此需要注意，其旋转内容保持不变，否则将会 hover 后变成未旋转，x和y为1表示 x y 轴上缩放不变，z 轴增加，效果如下：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-08-04，如有侵权请联系 cloudcommunity@tencent.com 删除

图像处理

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

图像处理

css

登录后参与评论

0 条评论

热度