texto - Voltear una tarjeta 3D con CSS

tarjetas animadas css

Question

Estoy tratando de hacer un efecto de volteo de tarjeta 3D con CSS como este.

La diferencia es que quiero usar solo CSS para implementarlo.

Aquí está el código que probé:

/*** LESS: ***/

    .card-container {
        position: relative;
        height: 12rem;
        width: 9rem;
        perspective: 30rem;
        .card {
            position: absolute;
            width: 100%;
            height: 100%;            
            div {
                position: absolute;
                height: 100%;
                width: 100%;
            }
            .front {
                background-color: #66ccff;
            }
            .back {
                background-color: #dd8800;
                backface-visibility: hidden;
                transition: transform 1s;
                &:hover {
                    transform: rotateY(180deg);
                }
            }
        }
    }

HTML:
<div class="card-container">
  <div class="card">
    <div class="front"><span>Front</span></div>
    <div class="back"><span>Back</span></div>
  </div>
</div>

El problema es que la tarjeta no se voltea, se ajusta de atrás hacia adelante de esta manera:

¿Es posible implementar este efecto de desplazamiento de la tarjeta 3D usando solo CSS ?

Answer 1

Sí, se puede hacer usando CSS solamente y puede hacerlo usando la propiedad de animación CSS3. Aquí hay un ejemplo de animación de voltear cartas.

<div class="container text-center">
  <div class="card-container">
  <div class="card">
    <div class="front">
      <span class="fa fa-user"></span>
    </div>
    <div class="back">User</div>
  </div>
</div>

El CSS

.card-container {
    display: inline-block;
    margin: 0 auto;
    padding: 0 12px;
    perspective: 900px;
    text-align: center;
}

.card {
  position: relative;
  width: 100px;
  height: 100px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.front, .back {
  position: absolute;
  background: #FEC606;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  color: white;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
  backface-visibility: hidden;
}

.front {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.back {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.card-container:hover .card {
  transform: rotateY(180deg);
}

.back {
  transform: rotateY(180deg);
}

También puede leer este artículo sobre CSS Flip Animation en Hover

También puede encontrar la demostración y la fuente de descarga del artículo.

Answer 2

Simplifiqué el código para hacerlo más corto y hacer que la tarjeta 3D se voltee al pasar el mouse . La tarjeta gira sobre el eje Y desde la cara frontal hacia la cara posterior, así es como se ve:

Esto es lo que cambié para el efecto de filtrado: - la cara frontal no se giró en el eje Y al pasar el cursor - el efecto de .back se lanzó cuando se .back div .back . Esto puede crear parpadeos a medida que ese div gira y "desaparece" a mitad de la rotación. Es mejor iniciar la animación cuando el padre estático está suspendido. - el primer padre no es realmente útil, así que lo eliminé

Aquí hay un ejemplo de una simple carta invertida de CSS que la animación de volteo se inicia al pasar el mouse:

.card {
  position: relative;
  width: 9rem; height: 12rem;
  perspective: 30rem;
}
.front, .back {
  position: absolute;
  width: 100%; height: 100%;
  transition: transform 1s;
  backface-visibility:hidden;
}
.front { 
  background-color: #66ccff; 
}
.back { 
  background-color: #dd8800; 
  transform: rotateY(180deg); 
}
.card:hover .front{ transform: rotateY(180deg); }
.card:hover .back { transform: rotateY(360deg); }

<div class="card">
  <div class="front"><span>Front</span></div>
  <div class="back"><span>Back</span></div>
</div>

Tenga en cuenta que deberá agregar prefijos de proveedor según los navegadores que desee admitir. Ver canIuse para transformaciones y transitions 3d .