Card by htwarriors108
#212121
1.myCard { 2 background-color: transparent; 3 width: 190px; 4 height: 254px; 5 perspective: 1000px; 6} 7 8.title { 9 font-size: 1.5em; 10 font-weight: 900; 11 text-align: center; 12 margin: 0; 13} 14 15.innerCard { 16 position: relative; 17 width: 100%; 18 height: 100%; 19 text-align: center; 20 transition: transform 0.8s; 21 transform-style: preserve-3d; 22 cursor: pointer; 23} 24 25.myCard:hover .innerCard { 26 transform: rotateY(180deg); 27} 28 29.frontSide, 30.backSide { 31 position: absolute; 32 display: flex; 33 flex-direction: column; 34 align-items: center; 35 justify-content: space-evenly; 36 width: 100%; 37 height: 100%; 38 -webkit-backface-visibility: hidden; 39 backface-visibility: hidden; 40 border: 1px solid rgba(255, 255, 255, 0.8); 41 border-radius: 1rem; 42 color: white; 43 box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.5); 44 font-weight: 700; 45} 46 47.frontSide, 48.frontSide::before { 49 background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%); 50} 51 52.backSide, 53.backSide::before { 54 background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); 55} 56 57.backSide { 58 transform: rotateY(180deg); 59} 60 61.frontSide::before, 62.backSide::before { 63 top: 50%; 64 left: 50%; 65 transform: translate(-50%, -50%); 66 content: ''; 67 width: 110%; 68 height: 110%; 69 position: absolute; 70 z-index: -1; 71 border-radius: 1em; 72 filter: blur(20px); 73 animation: animate 5s linear infinite; 74} 75 76@keyframes animate { 77 0% { 78 opacity: 0.3; 79 } 80 81 80% { 82 opacity: 1; 83 } 84 85 100% { 86 opacity: 0.3; 87 } 88}
13K views
13K views
MIT License