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

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

    一、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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    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>

    • 1
    • 2
    • 3
    • 4
    • 5

    效果如下：
    请添加图片描述
    此时依旧依照左上角进行缩放，我们可以换成右上角，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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    在这里插入图片描述

    接着，咱们使第一个 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

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

    <div class="container">
div>

    • 1
    • 2

    接下来为 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    整体代码如下：
    在这里插入图片描述
    此时页面效果如下：
    在这里插入图片描述
    接着，该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_bittitle>
    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97

    最终效果如下：
    请添加图片描述

    四、scale3d 使用

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

    在此将 box 的 hover 样式更改为对应的 scale3d：
    在这里插入图片描述

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

  • 相关阅读:
    金仓数据库KingbaseES数据库参考手册(服务器配置参数9. 错误报告和日志)
    Zookeeper原生API和Curator两种方式实现ZK分布式锁
    【打靶】vulhub打靶复现系列3---Chronos
    【JVM笔记】引用计数算法与可达性分析算法
    CCF2022版最新目录已发布，最新变动情况分析
    软件测试学习路线
    【优化模型】求有约束的多元函数最小值
    自定义结构体的json序列化
    生死时速，分秒必争
    Symbol Table
  • 原文地址：https://blog.csdn.net/A757291228/article/details/124004301