CSS实现3D效果

关键问题

如何绘制一个立方体

DOM的结构设计

关键的CSS属性

为什么要用伪元素(::after)：其实可以不用的

如何实现多个物体的独立旋转(比如柱状图)？

所有物体围绕一个中心点旋转是很容易的，大家都统一Z轴即可；但是如果每个物体要根据自己的中心旋转，该怎么处理呢？

操控

旋转中心点：transform-origin

立方体API设计

名词概念

面：face

6个面的命名：top、bottom、front、background、left、right

需要暴露出来的配置项

每个面的样式

面与面之间的线条的样式

参考资料

在线3D制作网站：

http://tridiv.com/app/index.html?dmlldz1lZGl0b3ImZG9jPXsic2V0dGluZ3MiOnsibmFtZSI6IlVudGl0bGVkIERvY3VtZW50IiwibGlnaHQiOiJzdGF0aWMiLCJzaGFkZSI6Ii4zIiwidGludCI6Ii4xNSIsImJvcmRlciI6IjAuNCIsImJnIjoidHJhbnNwYXJlbnQiLCJzbmFwIjoib2ZmIiwibWF0Y2giOjAuNSwiem9vbSI6MTAwfSwic2hhcGVzIjpbeyJ0eXBlIjoiY3Vib2lkIiwiaCI6IjIwIiwibyI6IjEiLCJjVHAiOiIjZTA0MjQyIiwiY0x0IjoiI2RlYWJhYiIsImNSdCI6IiM0ZGY5ODEiLCJjRnQiOiIjMjIwMjAyIiwiY0JrIjoiI2VkYWIxZCIsImNCbSI6IiMxNDExZWUiLCJuYW1lIjoiY3ViLTEifV19

用DIV+CSS实现的3D立体效果，太牛了

纯CSS的VR 3D景区：

https://720yun.com/

3D按钮学投影：

https://codepen.io/ordinaryp/pen/BaNyWqP

景深+阴影：

https://www.zhihu.com/zvideo/1322612267922870272

可交互的3D立方体(给父元素添加动画或者拖拽效果)：

https://zhuanlan.zhihu.com/p/93877945

perspective和transform-style：

https://www.cnblogs.com/hello-web/p/7011693.html