前言:今天用css3实现正方体。通过此案例,可以对css3在实现3D效果方面的属性有一定了解。
案例效果
HTML分析
最外层的.container触发3d效果,#cube保留父元素的3d空间同时包裹正方体的6个面,给每个面设置对应的class属性。
HTML代码如下:
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%