如何利用CSS绘制一些简略却又炫酷的３D成果呢？
首先上图
这是一张单纯用CSS实现的３D贺卡，上面一起来看一下事如何实现的：
１．ｈｔｍｌ代码
<body>
<div class="card"> Niu</div></body>
嗯~ o(￣▽￣)o，就这？？？
２．ＣＳＳ代码
ａ．革除默认款式，以及设置ｂｏｄｙ全屏背景色彩
* { padding: 0; margin: 0; } body { display: flex; justify-content: center; align-items: center; background-color: #2c3e50; height: 100vh; height: 100vw; }
ｎｉｕ为啥在这个奇怪的地位呢？好吧，这个不是要害．．．
ｂ．ｃａｒｄ标签设置根本款式
.card { width: 150px; height: 200px; background-color: #ecf0f1; display: flex; justify-content: center; align-items: center; color: #000; font-size: 20px; position: relative; }
为啥要设置position: relative呢，好问题，待会再说！
ｃ．伪元素上场了
.card::before, .card::after { position: absolute; background-image: linear-gradient(to right, #e74c3c, #f39c12); width: 50%; height: 100%; display: flex; align-items: center; top: 0; box-sizing: border-box; } .card::before { content: '生日'; left: 0; justify-content: flex-end; padding-right: 10px; } .card::after { content: '高兴'; right: 0; justify-content: flex-start; padding-left: 10px; }为啥要用为元素啊？因为香啊！伪元素就能够当作一个ｄｉｖ节点来对待，而且还不必再写两个ｄｉｖ元素，你说香不香．．．留神，咱们为伪元素增加了position: absolute属性，因而父元素要用绝对定位。~~~~
４．关键点来了
就这尽管还能看，单总感觉差了点意思，咱再来优化一下
.card::before { content: '生日'; left: 0; justify-content: flex-end; padding-right: 10px; ／／ 关键点在这里 transform-origin: left; transform: rotateY(-10deg); } .card::after { content: '高兴'; right: 0; justify-content: flex-start; padding-left: 10px; ／／ 关键点在这里 transform: rotateY(10deg); transform-origin: right; }请留神这里为每一个伪类增加了一个ｔｒａｎｓｆｏｒｍ属性和transform-origin属性。前者使其旋转，而后者则是指明旋转的参考线。这样咱们就能通过调整旋转的角度，实现两页的开展角度。
效果图如下：
５．最初一步３Ｄ透视
做了这么对，仍旧是立体展现，３D呢，这就来了，仅需两行代码
.card { width: 150px; height: 200px; background-color: #ecf0f1; display: flex; justify-content: center; align-items: center; color: #000; font-size: 20px; position: relative; /* 3D展现 */ transform-style: preserve-3d; transform: perspective(900px) rotateX(20deg) rotateY(-20deg); }为了不便查看３D成果，我给ｃａｒｄ元素增加了一个３D透视，并且旋转肯定角度，这样看起来就自带美感了。
好了，再见！