当前位置：首页 > Web开发 > 正文

CSS 3D的魅力

2024-03-31 Web开发

比来玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。

demo1

高度可变的立方体，先来看看最终效果，本身弄得有点丑，如果设计师调下色，添加点元素应该会都雅的多

1. 我们先用css实现一个长方体，一个长方体有6个边，我们写6个div，并用一个div包裹起来

2. 给.cube-box设置宽高以及preserve-3d属性保存子元素3d转换，子元素.cube全部绝对定位

.cube-box{ transform-style: preserve-3d; width: 30px; height: 100px; position: relative; } .cube{ position: absolute; left: 0; top: 0; }

3. 先写一个面.cube1，宽高100%等同于父元素的宽高，配景色为red，代码和效果如下

.cube1{ width: 100%; height: 100%; background: red; }

技术图片

4. 为了之后便利我们看到立体效果，此刻我们旋转一下父元素，插手如下代码，效果如下

.cube-box{ transform: rotateX(-30deg) rotateY(45deg); }

技术图片

5. .cube1作为第一个元素，我们不需要它旋转，它作为默认面，此刻拼接第二个面.cube2，凭据.cube1的写法，但是我们设置为绿色，效果如下，.cube2重叠在.cube1上，因此我们还需要旋转.cube2

.cube2{ width: 100%; height: 100%; background: green; }

技术图片

6. 我们此刻试着旋转一下.cube2，酿成了如下效果。关于rotate的旋转标的目的这里不解释，不懂的伴侣可以自行检察其他文档。

.cube2{ width: 100%; height: 100%; background: green; transform: rotateY(-90deg); }

技术图片

7. 在用translate3d移动一下吧。效果如下图，屌屌屌。但是问题来了，这里的代码不够灵活，translate的值需要手动计算，此刻宽是30px，需要移动它的一半15px进行拼接，这个值需要我们手动计算写上去，或者到时候用js计算，太low，我但愿只需要用js按照后端数据动态设置父元素.cube-box的宽高，子元素全部自适应就行，这样才更好用。