用CSS来制作一个立方体

This is the topface.
This is the leftface.
This is the rightface.

如果你用的是Firefox 3.5或者Safari 3.2+或者Google Chorme浏览器的话,你会看到右边有个立方体。它是用DIV+CSS写出来的。由于是在这篇文章当中,所以把CSS样式加到标签里进去了,如果制作网页的话再单独分出来就行。下面是其代码:

<div style=”position: relative; top: 200px;”>

<div style=”-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); top: -86px; left: 405px; position: absolute;”>
<div style=”-webkit-transform: skewY(-30deg) scaleY(1.16); -moz-transform: skewY(-30deg) scaleY(1.16); background-color: #eee; font-size: 0.862em; padding: 10px; width: 90px; height: 90px;”>This is the topface.
</div>
</div>

<div style=”-webkit-transform: skewY(30deg); -moz-transform: skewY(30deg); background-color: #ccc; left: 350px; position: absolute;”>
<div style=”padding: 10px; width: 90px; height: 90px;”>This is the leftface.
</div>
</div>

<div style=”-webkit-transform: skewY(-30deg); -moz-transform: skewY(-30deg); background-color: #ddd; left: 460px; position: absolute;”>
<div style=”padding: 10px; width: 90px; height: 90px;”>This is the rightface.
</div>
</div>
</div>

发表评论

电子邮件地址不会被公开。