html5 css3怎么用无序列表写一个3d立体正方体，目前还没学js，所以求怎么写，来个事例，参

html-css011

html5 css3怎么用无序列表写一个3d立体正方体，目前还没学js，所以求怎么写，来个事例，参,第1张

加入正方形宽高为100px，

ul li:nth-child(1){

background-color: red

transform: translate(-100px) rotateY(90deg)

}

ul li:nth-child(2){

background-color: blue

transform: translate(100px) rotateY(90deg)

}

ul li:nth-child(3){

background-color: orange

transform: translateZ(100px)

}

ul li:nth-child(4){

background-color: green

transform: translateZ(-100px)

}

ul li:nth-child(5){

background-color: black

transform: translateY(100px) rotateX(90deg)

}

ul li:nth-child(6){

background-color: chocolate

transform: translateY(-100px) rotateX(90deg)

}

空间想象力要好，最开始所有面都重合在一起，要一个个移到指定位置形成个立方体

perspective是设置3d元素与视图的距离，也就等同于相机拍摄物体的焦距。同一个物体（比如一个正方体），近看和远看，其立体效果肯定是不相同的，近看的时候会感觉立体效果很强烈，远看的时候就会感觉跟一幅平面图像差不多。同样，从不同的角度看同一个物体，也会有不同的3D效果，这些都好理解吧？

你可以做个实验，拿一个立方体（比如一个盒子），在你的眼睛与电脑显示器之间的垂直方向上来回移动，这个立方体的3D效果是不是会发生变化？perspective属性就是设置这个立方体与屏幕之间的距离的。

webgl可以用js调用openGL的，比如cs、极品飞车之类的游戏你应该知道，很多游戏都是openGL的，真正类似3D软件那种3D，里面有X,Y,Z轴向，构成一个立体空间，然后你可以放入一个人物、汽车或其他3D模型，上贴图，打灯光，游戏引擎实时渲染出带有凹凸、置换、颜色、漫射、反射、大气雾效、深景等通道组成成的游戏画面，openGL与3D软件渲染大原理是一样的，只是渲染精度没3D软件做图或做电影那么高，渲染算法和导入的3D模型面数、贴图大小什么的在openGL下都有限制，要保证游戏在主流的家庭电脑硬件上不卡。

css只有X，Y两个轴向，只能构成一个平面，不能构成一个真正的立体空间，你看到的网上css做的3D立方体的例子原理类似：ps里面你画三个正方形平面色块，通过拉伸、透视等方法变形把三个正方形拼成一个立体正方形盒子的三个面，这个是视觉上的欺骗，只能拼凑出简单的立体形状，css并没有在一个3D空间内生成带三个轴向的物体，也没办法通过css导入真正的3D模型来个转一圈之类的，你想用纯css做个3D机器猫就不行了。

如果是webgl，你可以建个机器猫模型，把obj格式的模型文件导入，然后指定贴图，灯光等等，加上js代码控制，可以在支持的浏览器上360角度的展示机器猫了。webgl原理就和游戏引擎一样(目前肯定没游戏引擎强大)，只不过游戏引擎是用c++之类的来开发，展示的东西基本上都需要用户执行一个安装到本地电脑的过程，现在webgl你可以用js来开发，然后直接在浏览器上展示。