java3D实现空间立方体_CSS3打造3D立方体

前言：今天用css3实现正方体。通过此案例，可以对css3在实现3D效果方面的属性有一定了解。

案例效果

HTML分析

最外层的.container触发3d效果，#cube保留父元素的3d空间同时包裹正方体的6个面，给每个面设置对应的class属性。

HTML代码如下：

1

2

3

4

5

6

CSS分析

1. 外观

给立方体的每个面设置不同的颜色，并且对字体进行设置。

代码如下：

#cube figure{

font-size: 120px;

line-height: 196px;

font-weight: bold;

color: white;

text-align: center;

}

.front { background: hsla( 0, 100%, 50%, 0.5 ); }

.back { background: hsla( 60, 100%, 50%, 0.5 ); }

.right { background: hsla( 120, 100%, 50%, 0.5 ); }

.left { background: hsla( 180, 100%, 50%, 0.5 ); }

.top { background: hsla( 240, 100%, 50%, 0.5 ); }

.bottom { background: hsla( 300, 100%