Card by ahmedyasserdev
#e8e8e8
1.three-d-card { 2 position: relative; 3 width: 300px; 4 height: 200px; 5 perspective: 1000px; 6} 7 8.card-wrapper { 9 width: 100%; 10 height: 100%; 11 transform-style: preserve-3d; 12 transition: transform 0.5s; 13} 14 15.three-d-card:hover .card-wrapper { 16 transform: rotateY(180deg); 17} 18 19.card-face { 20 position: absolute; 21 width: 100%; 22 height: 100%; 23 backface-visibility: hidden; 24 display: flex; 25 align-items: center; 26 justify-content: center; 27 border: 2px solid #3498db; 28 border-radius: 15px; 29 background-color: #fff; 30} 31 32.card-face.front { 33 transform: rotateY(0deg); 34} 35 36.card-face.back { 37 transform: rotateY(180deg); 38} 39 40.card-content { 41 text-align: center; 42 color: #333; 43} 44 45.card-title { 46 font-size: 24px; 47 font-weight: bold; 48 margin-bottom: 10px; 49} 50 51.card-description { 52 font-size: 16px; 53} 54
505 views
505 views
MIT License