How to make Card Flipping Animation in HTML & CSS ? (original) (raw)

`body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: rgb(189, 248, 166); }

.container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; padding: 20px; margin-top: 25vh; }

.card-wrapper { display: inline-block; perspective: 1000px; }

.card { position: relative; width: 200px; height: 300px; cursor: pointer; transition-duration: 0.6s; transition-timing-function: ease-in-out; transform-style: preserve-3d; }

.card .front, .card .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; border-radius: 4px; -webkit-box-shadow: -16px -5px 11px -12px rgba(0, 0, 0, 0.65); -moz-box-shadow: -16px -5px 11px -12px rgba(0, 0, 0, 0.65); box-shadow: -16px -5px 11px -12px rgba(0, 0, 0, 0.65); }

.card .front { z-index: 2; color: #333; background: #FFFFFF; font-weight: 700; font-size: 1rem; }

.card .back { font-size: 1.5rem; color: #333; background-color: rgb(127, 223, 89) }

/* Animation classes */ .flip-right .card .back { transform: rotateY(180deg); }

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

.flip-left .card .back { transform: rotateY(-180deg); }

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

.flip-up .card .back { transform: rotateX(180deg); }

.flip-up:hover .card { transform: rotateX(180deg); }

.flip-down .card .back { transform: rotateX(-180deg); }

.flip-down:hover .card { transform: rotateX(-180deg); }

.flip-diagonal-right .card .back { transform: rotate3d(1, 1, 0, 180deg); }

.flip-diagonal-right:hover .card { transform: rotate3d(1, 1, 0, 180deg); }

.flip-diagonal-left .card .back { transform: rotate3d(1, 1, 0, -180deg); }

.flip-diagonal-left:hover .card { transform: rotate3d(1, 1, 0, -180deg); }

.flip-inverted-diagonal-right .card .back { transform: rotate3d(-1, 1, 0, 180deg); }

.flip-inverted-diagonal-left:hover .card { transform: rotate3d(1, -1, 0, 180deg); }

.flip-inverted-diagonal-left .card .back { transform: rotate3d(1, -1, 0, 180deg); }

`