Card by JoseIsra
#e8e8e8
1.card { 2 width: 12rem; 3 cursor: pointer; 4} 5 6.content { 7 text-align: center; 8 position: relative; 9 transition: all 2.25s; 10 background-color: rgb(127, 204, 240); 11 padding: 5em; 12 transform-style: preserve-3d; 13} 14 15.card:hover .content { 16 transform: rotateY(0.5turn); 17} 18 19.front, 20.back { 21 position: absolute; 22 top: 0; 23 left: 0; 24 bottom: 0; 25 right: 0; 26 padding: 2em; 27 transform-style: preserve-3d; 28 backface-visibility: hidden; 29} 30 31.title { 32 transform: translateZ(5rem); 33 font-size: 2rem; 34} 35 36.subtitle { 37 transform: translateZ(2rem); 38} 39 40.back { 41 transform: rotateY(0.5turn); 42 background-color: #009bff; 43} 44 45.description { 46 transform: translateZ(3rem); 47} 48
5.3K views
5.3K views
MIT License