css3制作平面色子

CSS3可以用来制作各种炫酷的效果，比如用它来制作一个平面的色子就非常简单。

//HTML部分div class="cube">
    div class="face1">
    /div>
    div class="face2">
    /div>
    div class="face3">
    /div>
    div class="face4">
    /div>
    div class="face5">
    /div>
    div class="face6">
    /div>
    /div>
//CSS部分.cube {
    width: 50px;
    height: 50px;
    position: relative;
}
.face1,.face2,.face3,.face4,.face5,.face6 {
    position: absolute;
    width: 50px;
    height: 50px;
}
.face1 {
    background-color: green;
    transform: rotateX(90deg);
    top: 0;
    left: 0;
}
.face2 {
    background-color: yellow;
    transform: rotateY(90deg);
    top: 0;
    left: 0;
}
.face3 {
    background-color: red;
    transform: rotateY(-90deg);
    top: 0;
    left: 0;
}
.face4 {
    background-color: orange;
    transform: rotateX(-90deg);
    top: 0;
    left: 0;
}
.face5 {
    background-color: blue;
    transform: rotateY(180deg);
    top: 0;
    left: 0;
}
.face6 {
    background-color: purple;
    transform: rotateX(0deg);
    top: 50px;
    left: 0;
}
    

在HTML部分，我们使用了一个带有class为"cube"的div来包含6个class分别为"face1"到"face6"的子div，这6个子div就是色子的六个面。

在CSS部分，我们对于每个面使用了"position: absolute"来让它们重叠在一起。而用"transform: rotateX/Y"来对各个面进行旋转，最后得到像一个六面体一样的效果。

通过CSS3的这些魔法，我们很容易地制作出了一个平面的色子。快试试用CSS3来实现更多有趣的效果吧。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！