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.
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.
6 comentarios, 0 referencias
+
#