Card by david-mohseni
#e8e8e8
1.flip { 2 box-shadow: 0 0 10px rgba(128, 128, 128, 0.5); 3 padding: 1em; 4 width: 190px; 5 height: 254px; 6 transform-style: preserve-3d; 7 transition: 3s ease; 8} 9 10.flip:hover { 11 transform: rotateY(180deg); 12} 13/* Content */ 14.flip .content { 15 transform-style: preserve-3d; 16} 17 18.flip .back, .flip .front { 19 transform-style: preserve-3d; 20 backface-visibility: hidden; 21 display: flex; 22 flex-direction: column; 23} 24 25.flip .back { 26 transform: rotateY(180deg); 27 position: absolute; 28 top: 0; 29 left: 0; 30 right: 0; 31 bottom: 0; 32} 33 34.flip h2, 35.flip p { 36 transform: translateZ(90px); 37 text-shadow: 0 0 3px black; 38 text-align: center; 39} 40 41.flip h2 { 42 font-size: 3em; 43 color: #fff; 44 letter-spacing: 1px; 45} 46 47.flip p { 48 font-size: 1em; 49 color: #eee; 50 line-height: 1.6em; 51} 52 53.flip::before, 54.flip::after { 55 content: ""; 56 top: 0; 57 left: 0; 58 right: 0; 59 bottom: 0; 60 position: absolute; 61 background-image: linear-gradient(purple, red); 62 background-position: center center; 63 background-repeat: no-repeat; 64 background-size: cover; 65 transform: rotateY(180deg)translateZ(1px); 66} 67 68.flip::before { 69 transform: none; 70 background-image: linear-gradient(violet, orange); 71 background-position: center center; 72 background-repeat: no-repeat; 73 background-size: cover; 74}
3.5K views
3.5K views
MIT License