如何绘制正方体或者长方体，正方体和长方体原理是相似的，此处我们以正方体为例。
1、绘制正方体
绘制效果：
html结构：
<div class="cubic">
<span class="before"></span>
<span class="after"></span>
<span class="top"></span>
<span class="bottom"></span>
<span class="left"></span>
<span class="right"></span>
</div>原理：
因为是正方体：宽度=长度=高度。
1、 从前后视角看，就是我们正方体的前面（before）和后面（after）,width*height=长*高（此处必须按照这个顺序对应）；
前后视角就和我们平时看到的一张纸，相当于和二维平面平行，然后将前后面在垂直与二维平面的线上拉开正方体的宽度的距离，这样前后面准备就绪。
2、接下来是左右视角，即正方体的左右面，width*height=宽*高（此处必须按照这个顺序对应）；
左右视角相当于我们将与二维平面平行的正方形沿着Y轴旋转90度，然后将左右视角在的平面作为二维平面，同样在与其垂直的线上拉开正方体长度的距离，这样左右面准备就绪。
3、最后是上下视角，即正方体的上下面，width*height=长*宽（此处必须按照这个顺序对应）；
上下视角相当于我们将与二维平面平行的正方形沿着X轴旋转90度，然后将上下视角在的平面作为二维平面，同样在与其垂直的线上拉开正方体高度的距离，这样一个简单的正方体完成。
注意：以上是针对正方体的六个面，即div中的六个span标签。
然后<div class="cubic">必须要设置以下属性：
transform: rotateX(-30deg) rotateY(30deg);
transform-style: preserve-3d;注意：
transform: rotateX(-30deg) rotateY(30deg)是设置正方体在空间中的角度，相当于你的眼睛定位在某一点，然后你旋转各个方向观看。
然后加一些动画效果，正方体就可以转动起来啦。
下面我们直接上完整的代码（加了动画效果）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cubic{
position: absolute;
最低0.47元/天 解锁文章
2686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
