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.

Cubo 3D creado con CSS

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)

Compartir:
  • Facebook
  • Twitter
  • del.icio.us
  • Technorati
  • Digg
  • email

Deja una respuesta