Las transformaciones de CSS3 nos permiten aplicar transformaciones 3D y 2D a los elementos HTML. Gracias a la evolución de CSS ahora tambien tenemos la posibilidad de rotar, mover y escalar (entre otras cosas) los elementos sin tener que recurrir a programas de edicion de imagenes. Las transformaciones de CSS3 las podemos combinar con las transiciones para crear ciertos efectos llamativos.
Aqui teneis un ejemplo demostrativo, como veis tambien se pueden aplicar imagenes a esta tecnica. Pasad el cursor sobre ellas y retornaran a su estado 'plano' inicial.
ver codigo de ejemplo
<ul class="contenedor">
<li class="elemento3d n1">ELEMENTO 1</li>
<li class="elemento3d n2">ELEMENTO 2</li>
<li class="elemento3d n3">ELEMENTO 3</li>
<li class="elemento3d n4">ELEMENTO 4</li>
<li class="elemento3d n5">ELEMENTO 5</li>
</ul>
<style>
.n1{transform: rotate3d(0, 0, 1, 40deg);}
.n2{transform: rotate3d(0, 1, 0, 40deg);}
.n3{transform: rotate3d(1, 0, 0, 40deg);}
.n4{transform: rotate3d(1, 0, 1, 80deg);}
.n5{transform: rotate3d(1, 0, 0, 80deg);}
.contenedor {
padding: 0;
margin: 0 auto;
list-style: none;
display: flex;
flex-direction :row;
flex-wrap: wrap;
justify-content: space-around;
align-items:center;
height:300px;width:600px;
perspective:500px;
}
.elemento3d{
text-align:center center;
padding: 50px;cursor:pointer;
border: 3px solid #000;
line-height: 10px;
color: white;
font-weight: bold;
font-size: 50px;
width:50px;
background-color: #AF100A;
-webkit-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.75);
}
.elemento3d:hover{
transform: rotate3d(0, 0, 0, 40deg);
}
</style>
