Card by mRcOol7
#212121
1.container { 2 height: 100px; 3 display: flex; 4 justify-content: center; 5 align-items: center; 6} 7 8.card { 9 width: 300px; 10 height: 200px; 11 transform-style: preserve-3d; 12 transition: transform 0.5s; 13 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 14} 15 16.card:hover { 17 transform: rotateY(180deg) scale(1.1); 18} 19 20.card-inner { 21 position: relative; 22 width: 100%; 23 height: 100%; 24 transform-style: preserve-3d; 25 transform: rotateY(0deg); 26} 27 28.card-front, 29.card-back { 30 position: absolute; 31 top: 0; 32 left: 0; 33 width: 100%; 34 height: 100%; 35 backface-visibility: hidden; 36 display: flex; 37 justify-content: center; 38 align-items: center; 39 border-radius: 10px; 40 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 41} 42 43.card-front { 44 background: linear-gradient(to bottom right, #67b26f, #4ca2cd); 45 transform: rotateY(0deg); 46 box-shadow: 0 0 20px rgba(103, 178, 111, 0.5); 47} 48 49.card-back { 50 background: linear-gradient(to bottom right, #fccb90, #d57eeb); 51 transform: rotateY(180deg); 52 box-shadow: 0 0 20px rgba(252, 203, 144, 0.5); 53} 54
312 views
Variation of acard
MIT License