Ahora con lo que hemos visto en las ultimas semanas de CSS haremos un simple pero algo vistoso abanico de imagenes usando solo hojas de estilo, nuestro codigo a utilizar sera muy simple, tanto que se sorprenderán de lo fácil que es y los viejos programadores pensaran “ Como esto no estaba desde los principios del HTML”.
[codepen_embed height=”400″ theme_id=”22281″ slug_hash=”bEJopr” default_tab=”result” user=”fmorenor”]See the Pen Abanico CSS by Francisco Moreno (@fmorenor) on CodePen.[/codepen_embed]
style>
#cardfan, #cardfan img{ width:340px; height: 280px;
transition: .6s transform ease-out;
}
#cardfan {margin:0 auto;}
#cardfan img{ border: 32px solid #ffe;
box-shadow: 12px 12px 10px rgba(0,0,0,0.2);
position:absolute;
transform-origin: center 1200px;
}
#cardfan:hover img:first-child{
transform: rotate(12deg);
}
#cardfan:hover img:last-child{
transform: rotate(-12deg);
}
</style>
<body>
<div id="cardfan">
<img src="images/test1.jpg" alt="Imagen1">
<img src="images/test2.jpg" alt="Imagen2">
<img src="images/test3.jpg" alt="Imagen3">
</div>
- Primero tenemos las tres imágenes de prueba que deben de ser de preferencia del mismo tamaño dentro de nuestro DIV cardfan, ósea ( ABANICO).
- El estilo que realmente importa es el de la posición absoluta de la imagen y del centro de la transformación, así como los pixeles con respecto al centro que tendrá cada imagen, notes que solo las imágenes first y last, tienen rotación, y así de simple tenemos un efecto de abanico con animación en nuestro sitio web.
Asi tenemos ahora nuestro propio abanico de imagenes, ¿como ven?, solo tienen que poner el mouse encima de la imagen y verán la pequeña animación.
Si queremos dejar la imagen de arriba al centro, y que la animación afecta a las otras dos imágenes ponemos este codigo.
#cardfan:hover img:nth-child(2n){
transform: rotate(-12deg);
