Contenido

Firefox 3.5 y las transformaciones 3D

16 jun

+ 6

Firefox 3.5 nos delitará con la posibilidad de realizar tranformaciones 3D nativamente. Esta propiedad del CSS nos permitirá, entre otras cosas, dar efecto de profundidad a los elementos de nuestra web mediante transformaciones de inclinación y tamaño realizado con unas pocas líneas de código.

isocube
(Ver Imagen)

Código

// HTML
<div class="cube">
    <div class="face top">
    </div>
    <div class="face left">
    </div>
    <div class="face right">
    </div>
</div>

// CSS
.cube {
 position: absolute;
}

.face {
 position: absolute;
 width: 200px;
 height: 200px;
}

// Tranformaciones 3D
.top {
 -moz-transform: rotate(-45deg) skew(15deg, 15deg);
}

.left {
 -moz-transform: rotate(15deg) skew(15deg, 15deg);
}

.right {
 -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

Por el momento, deberemos usarla con prefijo (-moz), ya que aún no está estandarizado por la W3C. Por el momento tenemos que conformarnos con la beta 4, pero en poco más de un mes tendremos versión definitiva.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.