Voltea una tarjeta 3D con CSS

Estoy tratando de hacer un efecto de inversión de tarjeta 3D con CSS de esta manera.

Tarjeta de volteo 3D con CSS

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: 
Front
Back

El problema es que la tarjeta no se voltea, se mueve de atrás hacia adelante así:

Flipping efecto de la tarjeta no funciona

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

Simplifiqué el código para acortarlo y hacer que la tarjeta 3D se volviera . La tarjeta se voltea en el eje Y desde la cara frontal a la cara posterior así es como se ve:

Tarjeta de inversión 3D en vuelo estacionario

Esto es lo que cambié por el efecto filp: – la cara frontal no se giró en el eje Y en el vuelo .back – el efecto de .back se lanzó cuando el div .back estaba .back . Esto puede crear parpadeos ya que div está girando y “desaparece” a la 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 tarjeta de volteo CSS: la animación de volteo se inicia con el vuelo estacionario:

 .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); } 
 
Front
Back

sí, se puede hacer utilizando solo CSS y puede hacerlo utilizando la propiedad de animación CSS3. Aquí hay un ejemplo de la animación de la tarjeta volteando.

 
User

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 puedes leer este artículo sobre CSS Flip Animation en Hover

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