共计 1724 个字符，预计需要花费 5 分钟才能阅读完成。
如何利用 CSS 绘制一些简略却又炫酷的3D 成果呢？
首先上图
这是一张单纯用 CSS 实现的3D 贺卡，上面一起来看一下事如何实现的：
1．html代码
<body>
<div class="card">
Niu
</div></body>
嗯~ o(~▽~)o，就这？？？
2．CSS代码
a．革除默认款式，以及设置body全屏背景色彩
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #2c3e50;
height: 100vh;
height: 100vw;
}
niu为啥在这个奇怪的地位呢？好吧，这个不是要害．．．
b．card标签设置根本款式
.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 呢，好问题，待会再说！
c．伪元素上场了
.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;
}
为啥要用为元素啊？因为香啊！伪元素就能够当作一个div节点来对待，而且还不必再写两个div元素，你说香不香．．．留神，咱们为伪元素增加了 position: absolute 属性，因而父元素要用绝对定位。~~~~
4．关键点来了
就这尽管还能看，单总感觉差了点意思，咱再来优化一下
.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属性和 transform-origin 属性。前者使其旋转，而后者则是指明旋转的参考线。这样咱们就能通过调整旋转的角度，实现两页的开展角度。
效果图如下：
5．最初一步3D透视
做了这么对，仍旧是立体展现，3D 呢，这就来了，仅需两行代码
.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);
}为了不便查看3D 成果，我给card元素增加了一个3D 透视，并且旋转肯定角度，这样看起来就自带美感了。
好了，再见！
正文完
