Cubos en 3D usando CSS Transformation
Paul
Hayes ha realizado cubos 3D, para visualizar en los sitios Web, mediante el uso de Divs para cada una de las caras y posicionándolas con lo nuevo de CSS Transformation.
Lo puedes probar con Safari 3.2+, Google Chrome, Firefox 3.5+
Múltiples cubos en 3D con transiciones sin JavaScript
Lo puedes probar con Safari 4+, Google Chrome
HTML divs
<div class="cube"> <div class="topFace"> <div> Content </div> </div> <div class="leftFace"> Content </div> <div class="rightFace"> Content </div> </div>
CSS
.cube { position: relative; top: 200px; } .rightFace, .leftFace, .topFace div { padding: 10px; width: 180px; height: 180px; } .rightFace, .leftFace, .topFace { position: absolute; } .leftFace { -webkit-transform: skewY(30deg); -moz-transform: skewY(30deg); background-color: #ccc; } .rightFace { -webkit-transform: skewY(-30deg); -moz-transform: skewY(-30deg); background-color: #ddd; left: 200px; } .topFace div { -webkit-transform: skewY(-30deg) scaleY(1.16); -moz-transform: skewY(-30deg) scaleY(1.16); background-color: #eee; font-size: 0.862em; } .topFace { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); top: -158px; left: 100px; }
Enlace: Fofronline (Vía ajaxian)



