Card by Saad3092003
#212121
1.obj { 2 position: relative; 3 width: 200px; 4 height: 200px; 5 /* background-color: rgb(96, 96, 232); */ 6 transform-style: preserve-3d; 7 transition: 0.5s all; 8 transform: rotateX(-25deg) rotateY(20deg); 9} 10 11.objchild { 12 animation: rotate 4s infinite linear; 13 transform-style: preserve-3d; 14 position: absolute; 15 width: 100%; 16 height: 100%; 17 /* background:linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) ) ; */ 18} 19 20.objchild::after { 21 content: ""; 22 position: absolute; 23 width: 100%; 24 height: 100%; 25 /* background: rgb(37, 101, 230); */ 26 /* background: radial-gradient(center center, farthest-side , #9993, transparent); */ 27 filter: blur(20px); 28 box-shadow: 0 0 200px 15px white; 29 transform: rotateX(90deg) scale(1.1) translateZ(-120px); 30} 31 32.inn6 { 33 position: absolute; 34 width: 100%; 35 height: 100%; 36 background: rgb(21, 21, 21); 37 transform: rotateX(90deg) translateZ(100px); 38 animation: updown 4s infinite ease-in-out; 39} 40 41@keyframes rotate { 42 0% { 43 transform: rotate3d(0,1,0,0deg); 44 } 45 46 100% { 47 transform: rotate3d(0,1,0,360deg); 48 } 49} 50 51@keyframes updown { 52 0% { 53 transform: translateY(100px) rotateX(90deg) translateZ(100px); 54 } 55 56 50% { 57 transform: translateY(200px); 58 } 59 60 100% { 61 transform: translateY(100px) rotateX(450deg) translateZ(100px); 62 } 63}
1.3K views
Variation of acard
MIT License