Card by IWhat1
#212121
1.container { 2 width: 240px; 3 height: 294px; 4 perspective: 900px; 5} 6 7.card { 8 height: 100%; 9 width: 100%; 10 background-color: aliceblue; 11 position: relative; 12 transition: transform 1500ms; 13 transform-style: preserve-3d; 14 border-radius: 2rem; 15} 16 17.container:hover > .card { 18 cursor: pointer; 19 transform: rotateY(180deg) rotateZ(180deg); 20} 21 22.front, .back { 23 height: 100%; 24 width: 100%; 25 border-radius: 2rem; 26 position: absolute; 27 box-shadow: 0 0 10px 2px rgba(50, 50, 50, 2.5); 28 backface-visibility: hidden; 29 color: aliceblue; 30 background: linear-gradient(-135deg, 31#0703f7, #bcff04); 32} 33 34.front, .back { 35 display: flex; 36 justify-content: center; 37 flex-direction: column; 38 align-items: center; 39 gap: 20px; 40} 41 42.back { 43 transform: rotateY(180deg) rotateZ(180deg); 44} 45 46.back-heading, .front-heading { 47 font-size: 28px; 48 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 49 font-weight: bold; 50} 51
680 views
Variation of acard
MIT License