Estoy tratando de encontrar una manera de cómo hacer esta transición 3D cuando el cuadro se desplaza sobre mí. Sé cuando lo miro que está hecho usando CSS 3D y efectos de paralaje. ¿Hay un complemento jQuery ya hecho o un ejemplo de CSS3 de esto?
Cualquier ayuda sería muy apreciada. ¡Gracias de antemano por su colaboración!
Lo que he probado hasta ahora:
HTML
<div class="cube">
<div class="flippety">
<h1>Flippity</h1>
</div>
<div class="flop">
<h2>Flop</h2>
</div>
</div>
CSS
/* Set-up */
body {
color: rgb(6, 106, 117);
text-transform: uppercase;
font-family: sans-serif;
font-size: 100%;
background: #F4F6F8;
padding: 3em 0 0 0;
line-height: 62px;
-webkit-perspective: 1000px; /* <-NB */
}
/* Container box to set the sides relative to */
.cube {
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;
-webkit-transition: -webkit-transform .33s;
transition: transform .33s; /* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; /* <-NB */
}
/* The two faces of the cube */
.flippety,.flop {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);
height: 98px;
}
/* Position the faces */
.flippety {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
background-color: black;
}
.flop {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
background-color: red;
}
/* Rotate the cube */
.cube:hover {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg); /* Text bleed at 90º */
}
El problema es que cuando cambio la posición del cuadro, la animación no funciona correctamente. Y cuando cambio el tamaño, al pasar el mouse por encima, el prisma gira, pero parte de la cara frontal sigue apareciendo cuando no debería.
El problema es que el perspectivese establece en el cuerpo, por lo que todas las transformaciones son con respecto al transform-origindel cuerpo (que es por defecto 50% 50%, o en el medio).
Para obtener el efecto que desea, desea hacer el perspectivecon respecto a un elemento intermedio, lo que puede hacer colocando otro envoltorio alrededor del elemento. Al final, se verá así :
<div class="cube">
<div class="inner">
<div class="flippety">
<h1>Flippity</h1>
</div>
<div class="flop">
<h2>Flop</h2>
</div>
</div>
</div>
con el CSS:
.cube {
-webkit-perspective: 1000px;
}
.inner {
transform-style: preserve-3d;
transition: transform .33s;
height:100%;
}
/* Position the faces */
.flippety {
transform: translateZ(50px);
}
.flop {
transform: rotateX(-90deg) translateZ(-50px);
}
/* Rotate the cube */
.inner:hover {
transform: rotateX(89.999deg); /* Text bleed at 90º */
}
Por supuesto, puede evitar agregar otro contenedor jugando con el origen de la transformación y usando un contenedor adicional translateY, pero usar un contenedor adicional es la forma correcta de hacerlo.
Nota al margen: desde una perspectiva semántica, no debería usar h1s dentro de algo como esto. Deben usarse para títulos de página y limitarse a 1 por página.
Aquí hay una versión giratoria horizontal que usa solo CSS.