学习CSS3 3D转换，制作一个3D立方体

谁借莪１个温暖的怀抱￠ 2022-07-15 00:20 346阅读 0赞

要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需要注意的地方，这里把我学习的方法，过程分享给大家。再讲知识点之前，还是先弄清楚3D的坐标系吧，从网上搜了一张经典坐标系图，供大家回顾一下。

![3D视图][3D]

**1. 3D视图**

`transform-style:flat`（默认，二维效果）/`preserve-3d`（三维效果）。设置一个元素的`transform-style:preserve-3d;`只影响这个元素的子元素（如果孙元素也需要有3d效果，则需要给该元素的父元素设置`preserve-3d`）。这样所有的子元素都可以相对于父元素进行3d转换操作。和二维变化一样，三维变化使用`transform`属性来设置。下面列举几个常用的函数：

`translate3d(x,y,z)` 使元素在这三个纬度中移动,也可以分开写，如：`translateX(length)`,`translateY(length)`, `translateZ(length)`。注意z轴的值只能为`px`;

`scale3d(number,number,number)` 使元素在这三个纬度中缩放，也可分开写，如：`scaleX()`,`scaleY()`,`scaleY()`。

`rotateX(angle)` 是元素依照x轴旋转；

`rotateY(angle)` 是元素依照y轴旋转；

`rotateZ(angle)` 是元素依照z轴旋转。

**2. 透视效果**

`perspective(length)`为设置三维透视的距离。仅作用于元素的后代，而不是元素本身。当`perspective:none;`或`perspective:0;`时，相当于没有设置`perspective(length)`。

加入要创建一个小立方体，长宽高都是`200px`，如果`perspective`的属性值小于`200px`，那么就相当于站在盒子里面看结果，如果`perspective`的属性值非常大，那就是站在非常远的地方看。

当元素没有设置`perspective`时，所有后代被压缩在二维平面上，不存在透视效果。如果设置了`perspective`，将会看到三维效果。默认的透视视角中心是在容器的中点（注意是设置perspective的元素中点，不是他的后代元素），也就是`perspective-origin:50% 50%;`,也可以自己设置，比如：`perspective-origin:0% 0%;`,则是将视角定在左上角。

下面是几张效果图，创建了一个长宽高都是200px的立方体，三维中点(0,0,0)在立方体的中心，效果如下：

![立方体][20161026160341942]

当不设置`perspective`，也没有动画的初始画面，效果如下：

![初始画面][20161026160444631]

可以看到我们根本不知道他是一个立方体，除非他像上面那样动一下。

当加上perspective属性时：

![设置了perspective][perspective]

当perspective小于100px时（因为三维中点在立方体中心，所以相当于立方体在Z轴上的高度只有100px），可以看出是相当于在立方体里面看结果:

![在立方体里面][20161026161325329]

**注意：**  
       （1）如果一个元素绕x轴或者y轴旋转90度以上的话，他的背面将面向用户。背面的元素始终是透明的，所以用户能在后面看到正面的反向形态。如果不想让从背面看到正面的话，可以设置`backface-visibility`为`hidden`，那么这个元素在背面时是不可见的。比如说做扑克牌时是不希望在背面看到的。如果一个元素的背面是可见的，旋转时他将掩盖他下面的元素，而不是露出他下面的元素。

（2）如果父元素设置了`overflow:hidden;`那么子元素就无法跳出父元素的平面，即z轴的效果都将无法显示，相当于`transform-style:flat;`

下面是我写的代码，分享一下，如有不足请指正，谢谢！

<!DOCTYPE html>
    <html>
    <head>
        <title>Hello</title>
        <style> *{ margin: 0; padding: 0; } .parent{ position: relative; height: 400px; width:80%; margin-left: 10%; transform-style: preserve-3d; animation: test1 8s ease infinite; } .box{ position: absolute; left: 50%; top: 50%; margin-top: -100px; margin-left: -100px; width:200px; height: 200px; color: #FFFFFF; font-size: 30px; font-weight: 700; line-height: 200px; text-align: center; opacity: 0.8; } .box1{ background: #2b669a; transform: rotateY(90deg) translateZ(-100px); } .box2{ background: #509a64; transform: rotateY(90deg) translateZ(100px); } .box3{ background: #9a5468; transform: rotateX(90deg) translateZ(-100px); } .box4{ background: #979a25; transform: rotateX(90deg) translateZ(100px); } .box5{ background: #97709a; transform: translateZ(-100px); } .box6{ background: #589a25; transform: translateZ(100px); } @keyframes test1 { 0%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100%{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } </style>
    </head>
    <body>
    <div class="parent animation" id="css3d">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
    </div>
    </body>
    </html>

[3D]: /images/20220715/a3dd0ff774294ac8b83cf982e4e2c273.png
[20161026160341942]: /images/20220715/232eb5faeba54152815fbaec4046eb59.png
[20161026160444631]: /images/20220715/63d0da095a7345bebf05059ed719e160.png
[perspective]: /images/20220715/d20909ed94a444b9a399460c36052ccb.png
[20161026161325329]: /images/20220715/efbffa416d404067bf335f1945ad2bbf.png