7K views
1.flip-card { 2 background-color: transparent; 3 width: 240px; 4 height: 154px; 5 perspective: 1000px; 6} 7 8.heading_8264 { 9 position: absolute; 10 letter-spacing: .2em; 11 font-size: 0.5em; 12 top: 2em; 13 left: 18.6em; 14} 15 16.logo { 17 position: absolute; 18 top: 6.8em; 19 left: 11.7em; 20} 21 22.chip { 23 position: absolute; 24 top: 2.3em; 25 left: 1.5em; 26} 27 28.contactless { 29 position: absolute; 30 top: 3.5em; 31 left: 12.4em; 32} 33 34.number { 35 position: absolute; 36 font-weight: bold; 37 font-size: .6em; 38 top: 8.3em; 39 left: 1.6em; 40} 41 42.valid_thru { 43 position: absolute; 44 font-weight: bold; 45 top: 635.8em; 46 font-size: .01em; 47 left: 140.3em; 48} 49 50.date_8264 { 51 position: absolute; 52 font-weight: bold; 53 font-size: 0.5em; 54 top: 13.6em; 55 left: 3.2em; 56} 57 58.name { 59 position: absolute; 60 font-weight: bold; 61 font-size: 0.5em; 62 top: 16.1em; 63 left: 2em; 64} 65 66.strip { 67 position: absolute; 68 background-color: black; 69 width: 15em; 70 height: 1.5em; 71 top: 2.4em; 72 background: repeating-linear-gradient( 73 45deg, 74 #303030, 75 #303030 10px, 76 #202020 10px, 77 #202020 20px 78 ); 79} 80 81.mstrip { 82 position: absolute; 83 background-color: rgb(255, 255, 255); 84 width: 8em; 85 height: 0.8em; 86 top: 5em; 87 left: .8em; 88 border-radius: 2.5px; 89} 90 91.sstrip { 92 position: absolute; 93 background-color: rgb(255, 255, 255); 94 width: 4.1em; 95 height: 0.8em; 96 top: 5em; 97 left: 10em; 98 border-radius: 2.5px; 99} 100 101.code { 102 font-weight: bold; 103 text-align: center; 104 margin: .2em; 105 color: black; 106} 107 108.flip-card-inner { 109 position: relative; 110 width: 100%; 111 height: 100%; 112 text-align: center; 113 transition: transform 0.8s; 114 transform-style: preserve-3d; 115} 116 117.flip-card:hover .flip-card-inner { 118 transform: rotateY(180deg); 119} 120 121.flip-card-front, .flip-card-back { 122 box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2); 123 position: absolute; 124 display: flex; 125 flex-direction: column; 126 justify-content: center; 127 width: 100%; 128 height: 100%; 129 -webkit-backface-visibility: hidden; 130 backface-visibility: hidden; 131 border-radius: 1rem; 132} 133 134.flip-card-front { 135 box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset; 136 background-color: #171717; 137} 138 139.flip-card-back { 140 box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset; 141 background-color: #171717; 142 transform: rotateY(180deg); 143}
Praashoo7
Prashant
MIT License