Card by zakareaaljundi
#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 position: relative; 5 border-radius: 40px; 6 transition: all 0.8s; 7 perspective: 600px; 8 perspective-origin: center bottom; 9} 10 11.upper-part { 12 width: 100%; 13 height: 65%; 14 border-radius: 40px 40px 0 0; 15 position: relative; 16 transform-style: preserve-3d; 17 transition: all 0.9s; 18} 19 20.upper-part-face, 21.upper-part-back { 22 text-align: center; 23 background-color: lightgray; 24 color: purple; 25 border: 3px solid purple; 26 display: flex; 27 justify-content: center; 28 align-items: center; 29 position: absolute; 30 width: 100%; 31 height: 100%; 32 padding: 15px; 33 border-radius: 40px 40px 0 0; 34 font-weight: bold; 35 z-index: 2; 36 backface-visibility: hidden; 37 transition: all 0.6s; 38} 39 40.upper-part-back { 41 background-color: purple; 42 color: lightgray; 43 transform: rotatex(180deg); 44} 45 46.lower-part { 47 width: 100%; 48 height: 35%; 49 border-radius: 0 0 40px 40px; 50 position: relative; 51 transform-style: preserve-3d; 52 transform-origin: center top; 53 transition: all 0.9s; 54} 55 56.lower-part-face, 57.lower-part-back { 58 background-color: purple; 59 width: 100%; 60 height: 100%; 61 color: lightgray; 62 font-weight: bold; 63 position: absolute; 64 border-radius: 0 0 40px 40px; 65 display: flex; 66 justify-content: center; 67 align-items: center; 68 transform: translate(0, -0.8px); 69 backface-visibility: hidden; 70 z-index: 2; 71} 72 73.lower-part-back { 74 backface-visibility: visible; 75 border-radius: 40px; 76 color: purple; 77 background-color: lightgray; 78 transform: rotateX(180deg); 79 z-index: 1; 80 transition: border-radius 0.6s; 81} 82 83.card:hover > .upper-part { 84 transform: rotatex(-0.5turn); 85} 86 87.card:hover > .lower-part { 88 transform: translateY(88.3px) rotateX(0.5turn); 89} 90 91.card:hover > .lower-part > .lower-part-back { 92 border: 3px solid purple; 93 border-radius: 0 0 40px 40px; 94}
1.3K views
1.3K views
MIT License