如何利用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透视，并且旋转一定角度，这样看起来就自带美感了。
好了，再见！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。