Como hacer una carta 3D que se voltee con CSS
Para crear una tarjeta 3d debes seguir los siguientes pasos:
1-
Crear el documento HTML con su estructura básica
crear un documento css y vincularlos mediante la etiqueta
2-
Crear un contenedor, que será la carta, y dentro
de él otros dos contenedores, que serán cada lado de la carta. Es recomendable
que ambos lados de la carta tengan dos clases: una compartida y la otra
individual. Todo esto dentro de la sección del sitio en donde queramos ubicarlos.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title></title>
</head>
<body>
<section class="seccion">
<div class="contenedor">
<div class="lado frente"></div>
<div class="lado atras"></div>
</div>
</section>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title></title>
</head>
<body>
<section class="seccion">
<div class="contenedor">
<div class="lado frente"></div>
<div class="lado atras"></div>
</div>
</section>
</body>
</html>
3-
Dales a ambos lados los estilos correspondientes
para que queden como tú elijas. Esto lo harás mediante la clase que compartan
ambos div, obviamente.
.contenedor{
width:
200px;
height:
300px;
}
.lado{
width:
100%;
height:
100%;
}
.frente{
background-color:
red;
}
.atras{
background-color:
blue;
}
4-
Ahora empieza la magia. Deberás rotar el lado de
atrás unos 180º en el eje y con la propiedad transform
.atras{
background-color:
blue;
transform:
rotateY(180deg);
}
5-
Luego ocultarás la parte posterior de cada div
con “backface-visibility”. En este punto verás que el lado de atrás desaparece.
No te preocupes, sigue estando ahí.
.lado{
width:
100%;
height:
100%;
backface-visibility:
hidden;
}
6-
Lo siguiente será unir las dos partes. Para esto
le daremos a ambas una posición absoluta y al contenedor una posición relativa
para que los estilos que tenga se basen en su contenedor y no en el body.
.contenedor{
width:
200px;
height:
300px;
position:
relative;
}
.lado{
width:
100%;
height:
100%;
backface-visibility:
hidden;
position:
absolute;
7-
Convierte al contenedor en un elemento 3D con “transform-style”.
.contenedor{
width:
200px;
height:
300px;
position:
relative;
transform-style:
preserve-3d;
}
8-
Mediante la subclase “hover” le diremos a la
carta que se gire, como hicimos con el lado de atrás al principio, cuando el
mouse le pase por encima.
.contenedor:hover{
transform:
rotateY(180deg);
}
9-
El movimiento es muy brusco, digamosle que se lo
tome con calma. Utilizando “transition” podremos especificar cuánto debe tardar
en rotar.
.contenedor{
width:
200px;
height:
300px;
position:
relative;
transform-style:
preserve-3d;
transition:
2s;
}
10-
Finalmente, con “perspective” le daremos el
toque final para que realmente se vea como una verdadera carta 3D hecha en CSS.
section{
-webkit-perspective:
800;
}
.contenedor{
width:
200px;
height:
300px;
position:
relative;
transform-style:
preserve-3d;
transition:
2s;
}
.contenedor:hover{
transform:
rotateY(180deg);
}
.lado{
width:
100%;
height:
100%;
backface-visibility:
hidden;
position:
absolute;
}
.frente{
background-color:
red;
}
.atras{
background-color:
blue;
transform:
rotateY(180deg);
}
Así de sencillo. En otro momento publicaré
como hacer una tarjeta muy parecida a esta, pero haciendo que el fondo se vea
revertido cuando la demos vuelta.
Si necesitas hacerme alguna consulta no dudes en hacermela en mi facebook.
Si necesitas hacerme alguna consulta no dudes en hacermela en mi facebook.
¡Éxitos!
Comentarios