banner
hace 5 años
929 Views

Rotaciones 3D con Css3

Autor:
banner

 

Tutorial Animaciones Css3 , muy visual, donde generaremos Rotaciones 3D con Css3, estas rotaciones nos permitirá ver en cierta medida las capacidades nuevas de Css3.

Generaremos un efecto de Rotación 3D con imágenes, para los cuales necesitaremos una imagen delantera y trasera

 

En este tutorial necesitaremos 6 fotos, que representaran la imagen delantera y trasera, que irán en la carpeta raíz.

 

Una vez que tengamos las fotos del mismo tamaño nos meteremos con el código Html

 

Para realizar esta practica, crearemos una tabla de tres filas y tres columnas. En cada celda pondremos las imágenes.

 



<table align="center">

<tr>

<td>

<div id="flip-container">

<div id="flip-card">

<div class="front face">
  <img src="images/delantera1.jpg" alt="Parte delantera"/>
</div>
<div class="back face">
  <img src="images/trasera1.jpg" alt="Parte trasera"/>
</div>
</div>
</div>
</td>
<td>
<div id="flip-container">
<div id="flip-card">
<div class="front face">
  <img src="images/delantera2.jpg" alt="Parte delantera"/>
</div>
<div class="back face">
  <img src="images/trasera2.jpg" alt="Parte trasera"/>
</div>
</div>
</div>
</td>
<td>
<div id="flip-container">
<div id="flip-card">
<div class="front face"> 
 <img src="images/delantera3.jpg" alt="Parte delantera"/>
 </div>
<div class="back face">
 <img src="images/trasera3.jpg" alt="Parte trasera"/>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="flip-container">
<div id="flip-card">
<div class="front face">
  <img src="images/delantera4.jpg" alt="Parte delantera"/>
</div>
<div class="back face">
  <img src="images/trasera4.jpg" alt="Parte trasera"/>
</div>
</div>
</div>
</td>
<td>
<div id="flip-container">
<div id="flip-card">
<div class="front face">
   <img src="images/delantera5.jpg" alt="Parte delantera"/>
 </div>
<div class="back face">
 <img src="images/trasera5.jpg" alt="Parte trasera"/>
 </div>
</div>
</div>
</td>
<td>
<div id="flip-container">
<div id="flip-card">
<div class="front face">
  <img src="images/delantera6.jpg" alt="Parte delantera"/>
</div>
<div class="back face">
  <img src="images/trasera6.jpg" alt="Parte trasera"/>
</div>
</div>
</div>
</td>
</tr>
</table>


 

Viendo este ejemplo podemos comentar que cada celda esta compuesta por 4 etiquetas <div>, aunque parezca lioso es bastante sencillo de explicar. Primero esta el <div>flip-container que crea el contenedor para cada uno de las películas que queremos insertar.

 
Dentro de este <div> tendríamos que crear otro <div>, en este caso flip-card” que seria el contenedor de las imágenes y por ultimo tendríamos dentro de este contenedor dos <div> haciendo referencia a la portada y a la contraportada.

 

Vamos al Css3 para agregarle diseño y estilo

 

Ahora explicaremos donde y como se consigue la Rotación 3D con Css3 que realizamos en la practica.

 


body {
margin-top: 5em;
text-align: center;
color: #414142;
background: #CCC; /* Old browsers */
}

h1 {
display: block;
font-size: 25px;
font-weight: normal;
font-family: "Graduate";
margin: 2em auto;
}

#container {
display: block;
margin: 0 auto;
width: 1024px;
}

 

Mediante estas etiquetas conformaremos el diseño general de el body, el contenedor principal y el titulo que lleva h1.

 

Veamos el código que realiza estas Animaciones Css3

&amp;amp;lt;/p&amp;amp;gt;
#flip-container {
position: relative;
margin: 10px auto;
width: 300px;
height: 388px;
z-index: 1;
}

.face.back, .face.front {
position: absolute;
top: 0;
left: 0;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

.face.front {
z-index: 2;
}

.face.back {
z-index: 1;
}

@media all and (-webkit-transform-3d) { /* Se usa @media para ver si 3D transformations son soportadas por los navegadores */

#flip-container {
-webkit-perspective: 1000;
}

#flip-card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
-webkit-transform: 1s;
}

#flip-container:hover #flip-card {
-webkit-transform: rotateY(-180deg);
}

.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
}

.face.back {
display: block;
-webkit-transform: rotateY(180deg);
}
}

@-webkit-keyframes rotate{
0% {
background-position:0px 0px;
}
100% {
background-position:-160px 0px;
}
}

@-ms-keyframes rotate{
0% {
background-position:0px 0px;
}
100% {
background-position:-160px 0px;
}
}

@-moz-keyframes rotate{
0% {
background-position:0px 0px;
}
100% {
background-position:-160px 0px;
}
}
&amp;amp;lt;p style="text-align: left;"&amp;amp;gt;

 

Como podemos ver, utilizamos ciertas reglas para realizar la animación, primero hemos declarado el contenedor principal y seguido hemos puesto tamaños y posiciones a las partes de la película, es decir donde van a ir las imágenes, mediante las clases; face.front y face.back.

 

Después ha cada cara individualmente se le declara una regla z-index, para determinar cual va a estar encima de la otra, en este caso estará la portada encima de la contraportada así que face.front, tendrá z-index:2; y el face.back:1;

 

Las etiquetas @media comprobaran el soporte de la Rotación 3D con Css3 en los navegadores modernos

 

Estas etiquetas funcionarían como las funciones, si el navegador indicado en la función y la regla son compatibles se ejecuta el código que esa función agrupa.

 

Dentro de estas funciones se encuentra las transiciones y transformaciones necesarias para crear la Rotaciónes 3D en Css3

 

Con esto damos por concluido el tutorial, espero que os haya gustado y os sirva para vuestros proyectos.

 

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