不管有没有学过素描的应该都知道，通过平面的光影可以营造出立体的效果，让它看起来非常的逼真。css也可以如此，运用素描的原理我们可以创造平面3D的效果。（以下素材来源：bootstrap模板库）
青铜级：平面3D
看看下面这个玻璃球的效果，是不是很逼真：
我们使用box-shadow进行多层不同方位的投影，代码如下：
box-shadow: inset -5px 5px 8px 0px rgb(0 0 0 / 15%), inset -30px 15px 20px -10px rgb(0 0 0 / 20%), inset -10px 10px 30px 5px rgb(0 0 0 / 20%), inset -10px 10px 10px -5px rgb(0 0 0 / 10%), inset 12px -20px 5px -21px rgb(255 255 255 / 80%), inset 10px -30px 20px -20px rgb(255 255 255 / 50%), inset 50px -50px 20px -10px rgb(108 108 108 / 15%);
观察动图，是不是就像素描一样一层层描绘，有高光有阴影！
文字的话使用text-shadow,给文字打造层层叠叠的效果，如下：
上色原理就是一层深色调，一层浅色调，重复多层，代码如下：
text-shadow: -0.8191520405px 0 0 #790606, 0px -0.5735764357px 0 #da0b0b, -1.6383040811px -0.5735764357px 0 #790606, -0.8191520405px -1.1471528715px 0 #da0b0b；
连表情图🍌也会有投影
代码如下：
text-shadow: 0 10px 7px rgb(0 0 0 / 40%), 0 -10px 1px #fff;
font-family: 'Wendy One',sans-serif;
很好，现在你已经基本学会了平面3d的css绘制技巧了，不同于平面效果，真正立体3d的效果是，从不同面所看到的形状不同，而且光源和明暗也不同。
钻石级：3d打印
来一个简单的例子，打印一个3d盒子
这个是不是很容易？通过transform定位，将6个面分别放在x,y,z轴上。
如果说正方体很容易的话，那球体呢，css能做到球体么？
当然可以，不过用了一些小手段。
将多个块旋转拼接凑成一个球体，类似足球6边形拼接的原理。如果块足够小的话，可以无限的接近圆球。如果上图去掉了块之间的边界线，很难看出来它是由方块组成的。有兴趣研究到原链接查看。
下图这个就是去掉边界后的效果，看起来这个地球无限接近圆，肉眼我们只能隐约看到边缘上块的棱角。
图中的文字旋转是如何做到的？这个其实也是欺骗眼睛的，他的每一个字符都是一个块组成，把块进行旋转就可以了。
王者级：3d建模
上面基础3d的原理你学会了吗？你玩过threejs么？css也是可以做到3d建模。
接下来欣赏一下大神的作品
是不是很酷炫，你已经迫不及待想去撸一个出来？
