banner
hace 4 años
937 Views

Transformación de Imágenes Css3

Autor:
banner

 
 
Hola amigos hoy vamos a hablar de como podemos transformar las imágenes con el fin de posicionar-la en algún hueco.
 
Estas transformaciones se realizan mediante reglas Css3, como ya vimos en el articulo de las Animaciones Css3.
 

En cambio este ejercicio no requiere de ninguna transición, ya que lo único que vamos a realizar, es la trasformación de las imágenes para que encajen en el cubo que queremos realizar.

 

Bueno pues empecemos con el código Html, en este código tendremos que definir cada imagen, cada imagen ira en un contenedor <div>, y a esos contenedores se les asignara un nombre de clase; face top, face left y face right.

 

Una vez hecho esto, crearemos otro contenedor que agrupara a las tres imágenes, a la clase la llamaremos: cube.

 



<div class="cube"> 
<div class="face top"> 
                   <img src="1.png"/>
           </div>
<div class="face left"> 
                   <img src="3.png"/>
           </div>
<div class="face right">
                   <img src="2.png"/> 
           </div>
 </div>

 

Con esto ya tendríamos terminado el código Html, pasemos entonces al Css

 

Bueno en este archivo Css3 declararemos las etiquetas; cube, face, top, left, right.

Para realizar el cubo, necesitaremos aplicar a las imágenes un par de transformaciones, como pueden ser; rotate y skew.

 


.cube { position: absolute; top: 100px; left:35%; }
.face { position: relative; width: 100px; height: 100px; overflow: hidden; }
.top { top: 100px; left: 89px;
background: #ffffff;
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-moz-transform: rotate(-45deg) skew(15deg, 15deg); }
.left { top: 77px; left: 44px;
background: #ffffff; color: #ffffff;
-webkit-transform: rotate(15deg) skew(15deg, 15deg);
-moz-transform: rotate(15deg) skew(15deg, 15deg); }
.right { top: -23px; left: 133px;
background: #ffffff; color: #ffffff;
-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
-moz-transform: rotate(-15deg) skew(-15deg, -15deg); }

 

Como podemos apreciar, utilizamos la etiqueta trasform, para darle esa rotación y volteado.
Si nos fijamos en las clases vemos que la clase top esta rotada -45 grados, mientras que el volteado, realiza 15 grados por cada esquina. Las demás clases, como la left, rota 15 grados y voltea también 15. Mientras que en el otro lado necesitaremos una rotación y un volteado de -15 grados.

 

El tutorial que proponíamos hoy, era realizar un cubo con imágenes y así utilizar las nuevas reglas de Css3

 

Cualquier duda o problema no dudes en preguntar

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Tags Artículos:
Artículos Categorías:
Css3 · Desarrollo Web
banner

Deja un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Left Menu Icon
Web Sdc Studio
Right Menu Icon