• 3D three.js（1）怎么写一个3D旋转的正方体

    效果如图所示：
    在这里插入图片描述

    本篇暂未用到three.js，但是能学到一些基础的3D知识！

    先记住xyz轴的展示和画法：
    rotate:左手法则___
    伸出左手，大拇指指向正轴方向，四个手指的指向即是旋转正向，但务必记住是左手！

    在这里插入图片描述

    1. 先画立方体初始面

    在这里插入图片描述

    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正方体title>
    <style>
        .cube {
            /* 定义 3D 元素距视图的距离，以像素计，当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 */
            -webkit-perspective: 1000px;
            /* 居中对齐 */
            width: 30px;
            height: 30px;
            left: 50%;
            top: 50%;
            margin-left: -15px;
            margin-top: -15px;
            position: absolute;
            /* 6s，动画的执行时间：动画6s要完成 */
            /* loadingBarSpin：动画的名称*/
            /* linear，规定动画的速度曲线：动画从开始到结束保持相同的速度。*/
            /* infinite，定义动画应该播放多少次：无限次（永远）*/
            -webkit-animation: 6s loadingBarSpin linear infinite;
            /* 让转换的子元素保留3D转换，表示所有子元素在3D空间中呈现 */
            -webkit-transform-style: preserve-3d;
            /* 沿x轴往下，y轴往左旋转20度 */
            -webkit-transform: rotateX(-20deg) rotateY(-20deg);
        }

        /* 设置所有子节点的样式 */
        .cube * {
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px solid rgb(54, 226, 248);
        }
    style>
head>

<body>
    <div class="cube">
        <div class="font">div>
        <div class="back">div>
        <div class="left">div>
        <div class="right">div>
        <div class="top">div>
        <div class="bottom">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

    一开始由于6个面都有position: absolute;,所以它们是叠在一起的。

    2.前面

    在这里插入图片描述

            /* 往前移动15px */
        .cube .font {
            -webkit-transform: translateZ(15px);
        }

    • 1
    • 2
    • 3
    • 4

    3.后面

    在这里插入图片描述

            /* 往后移动15px */
       .cube .back {
            -webkit-transform: translateZ(-15px);
        }

    • 1
    • 2
    • 3
    • 4

    4.左面

    在这里插入图片描述

        /* 先旋转90度，与中间面相交 */
        .cube .left {
            -webkit-transform: rotateY(-90deg) translateZ(15px);
        }

    • 1
    • 2
    • 3
    • 4

    5.右面

    在这里插入图片描述

     .cube .right {
            -webkit-transform: rotateY(90deg) translateZ(15px);
        }

    • 1
    • 2
    • 3

    6.上面

    在这里插入图片描述

            .cube .top {
            -webkit-transform: rotateX(90deg) translateZ(15px);
        }

    • 1
    • 2
    • 3

    7.下面

    在这里插入图片描述

            .cube .top {
            -webkit-transform: rotateX(90deg) translateZ(15px);
        }

    • 1
    • 2
    • 3

    到此为止，正方体就画完了，此时可以给一个旋转的动画，来增加它的画面感

    8.增加动画

      @-webkit-keyframes loadingBarSpin {
            from {
                -webkit-transform: translateZ(-15px) rotateX(0) rotateY(0deg);
                transform: translateZ(-15px) rotateX(0) rotateY(0deg);
            }

            to {
                -webkit-transform: translateZ(-15px) rotateX(360deg) rotateY(360deg);
                transform: translateZ(-15px) rotateX(360deg) rotateY(360deg);
            }
        }
```

### 9完整代码
```html




    
    
    3D正方体
    



    
    "cube">
        
    "font">
    
        
    "back">
    
        
    "left">
    
        
    "right">
    
        
    "top">
    
        
    "bottom">
    
    
    




```

    • 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
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
  • 相关阅读:
    JavaWeb后端
    MindSpore:图算融合报错
    go项目部署：docker部署go项目&直接运行二进制文件部署（两种方式，步骤详细）
    一文读懂java变量类型
    SAP-MM-查找采购订单的创建和修改日期
    安装petalinux
    JAVA线程池详解（ThreadPoolExecutor）
    YOLOv5 Head解耦
    redis与 缓存击穿、缓存穿透、缓存雪崩
    Linux内核源码分析 (B.x)Linux内核的页面分配机制
  • 原文地址：https://blog.csdn.net/weixin_39818813/article/details/127614780