Menu:
HTML 5 Cube
by mrlanrat • published on 03/31/10
HTML 5 allows you to create 3D objects. Using CSS you can create isometric objects. I will demo this by building a cube in html. First we need to start off with a div.
div class="cube">
<div class="face top"></div>
<div class="face left"></div>
<div class="face right"></div>
</div>
Next we need to setup the CSS for our cube.
.cube {
position: absolute;
top: 1000px;
left: 360px;
}
.face {
position: absolute;
width: 200px;
height: 200px;
overflow: hidden;
font-family: monospace;
font-size: 24px;
}
.top {
top: 0;
left: 89px;
background: #fff;
color: #999;
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
top: 155px;
left: 0;
background: #999;
color: #333;
-webkit-transform: rotate(15deg) skew(15deg, 15deg);
-moz-transform: rotate(15deg) skew(15deg, 15deg);
}
.right {
top: 155px;
left: 178px;
background: #ccc;
color: #666;
-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}
Now you can place whatever you want into your divs and it will be placed on the cube. Below is an example:
Lorem ipsum dolor sitamet, consectetur adipiscing elit. Nam eget dolor dui. Phasellus metus mauris, tincidunt ut porttitor quis, auctor vitae felis.
Comments