This post is saved as a draft.
#212121
1.card { 2 position: relative; 3 width: 190px; 4 height: 254px; 5 color: #fff; 6 transition: 0.5s; 7 cursor: pointer; 8 transform: rotateX(-55deg) rotateY(15deg) rotateZ(60deg); 9} 10 11.card:hover { 12 transform: rotate(0); 13} 14 15.card:active { 16 transform: translateY(-20px) rotate(-3deg); 17 scale: 0.95; 18} 19 20.card::before { 21 content: ''; 22 width: 100%; 23 height: 100%; 24 position: absolute; 25 top: 0; 26 left: 0; 27 background: linear-gradient(315deg, #03a9f4, #ff0058); 28} 29 30.card::after { 31 content: ''; 32 position: absolute; 33 top: 0; 34 left: 0; 35 width: 100%; 36 height: 100%; 37 background: linear-gradient(315deg, #03a9f4, #ff0058); 38 filter: blur(30px); 39} 40 41.card span { 42 position: absolute; 43 top: 6px; 44 left: 6px; 45 right: 6px; 46 bottom: 6px; 47 background-color: rgba(0, 0, 0, 0.6); 48 z-index: 2; 49} 50 51.card span::before { 52 content: ''; 53 position: absolute; 54 top: 0; 55 left: 0; 56 width: 50%; 57 height: 100%; 58 background-color: rgba(255, 255, 255, 0.1); 59} 60 61.card .content { 62 position: relative; 63 padding: 10px; 64 z-index: 10; 65 width: 100%; 66 height: 100%; 67 display: flex; 68 align-items: center; 69 justify-content: center; 70 font-weight: 800; 71 font-size: 1.5em; 72}
Variation of acard
Variation of acard