CSS3 3D立方体_css3实现3d立方体-CSDN博客

本文链接：https://blog.csdn.net/lsk222/article/details/104573954

CSS3 实现3D立方体需要我们有一定的空间想象能力，但难度不大

首先我们需要知道实现3D立方体时坐标系是什么样的，这是一张经典的图。把网格图当做浏览器屏幕

z轴是垂直屏幕的轴指向你

另外，在实现3D立方体之前我们还需要先了解几个属性及功能函数：

transform：

位移： translate3d（值一，值二,值三）值一：水平方向位移值二：垂直方向位移的距离值三：z轴方向平移的距离

translateX（）：元素沿着x轴位移

translateY（）：元素沿着y轴位移

translateZ（）：元素沿着z轴位移

旋转：rotate（xxxdeg）deg是单位默认的以元素中心点转动

rotateX(xxxdeg):绕着x轴转动

rotateY(xxxdeg):绕着y轴转动

rotateZ（xxxdeg):绕着z轴转动

rotate3d（值一，值二，值三，xxxdeg）：注意 rotate3d（）不是想象的那样，绕着x,y,z旋转

前三个数字分别表示绕x、y、z轴旋转的矢量值，xxxdeg表示旋转的角度

transform-origin：（值一，值二）坐标原点，元素默认是绕着中心点旋转的，通过设置坐标原点可以改变旋转的点，甚至可以定义在元素外面。同样的（值一）表示水平的位移，（值二）表示垂直方向的位移，

transform-style:preserve-3d 形成一个3D空间很重要，绘制立方体必加

现在我们可以绘制立方体了：

先说说思路，正方体有六个面组成，我们可以需要定义6个大小相同的平面（宽200px 高200px），利用绝对定位让其重叠，当然了我们要先定义一个父元素作为它们位置的参考，使用相对定位。第1个平面沿着z轴正方向平移100px，第2个平面沿着z轴负方向平移100px;第3个平面沿着x轴向左平移100px,然后绕着Y轴旋转90deg,第四个平面沿着x轴向右平移100px,然后绕着Y轴旋转90deg，第5个平面沿着y向下平移100px,然后绕着x轴旋转90deg，第6个平面沿着y向上平移100px,然后绕着x轴旋转90deg，说的有些繁琐，需要自己想象一下，注意当我们给平面添加数字时，可能会出现数字方向不正确的问题，注意旋转的方向或者将这个面绕y轴/x轴旋转 180deg.

Talk is cheap ，show me your code 现在呈现代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立方体一</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 80px auto;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d; //形成3d空间
            transform: rotateX(40deg) rotateY(45deg); //将3d空间旋转便于观察
            position: relative;
        }
        .box h3{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 0;bottom: 0;
            left: 0;right: 0;
            margin: auto;
            text-align: center;
            line-height: 200px;
            font-size: 60px;
            color: white;
            opacity: .8;     //透明度
            backface-visibility: hidden;  //背面不可见
           
        }
        .h-1{
            transform: translateZ(100px);
            background-color: orange;
        }
        .h-2{
            transform: translateZ(-100px) rotateY(180deg);
            background-color: red;
        }
        .h-3{
            background-color: blue;
            transform: translateX(-100px) rotateY(-90deg) ;
        }
        .h-4{
            transform: translateX(100px) rotateY(90deg);
            background-color: cadetblue;
        }
        .h-5{
            transform: translateY(100px) rotateX(-90deg);
            background-color: coral;
        }
        .h-6{
            transform: translateY(-100px) rotateX(90deg);
            background-color: darkgreen;
        }
    </style>
</head>
<body>
    <div class="box">
        /* 添加六个平面*/
        <h3 class="h-1">1</h3>
        <h3 class="h-2">2</h3>
        <h3 class="h-3">3</h3>
        <h3 class="h-4">4</h3>
        <h3 class="h-5">5</h3>
        <h3 class="h-6">6</h3>
    </div>
</body>