├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # 3d-anmation-effect -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 3D Circle Animation 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | body { 8 | background-color: black; 9 | height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | .card { 15 | width: 400px; 16 | height: 400px; 17 | border-radius: 50%; 18 | background: linear-gradient(45deg, #a5fecb, #20bdff); 19 | transform-style: preserve-3d; 20 | transition: all 1s ease-in-out; 21 | } 22 | .circle { 23 | border-radius: inherit; 24 | position: absolute; 25 | background: linear-gradient(#ffffff27, #ffffff28); 26 | box-shadow: -5px 5px 10px #64646f33; 27 | transition: all 1s ease-in-out; 28 | } 29 | .circle:nth-child(1) { 30 | inset: 25px; 31 | transition-delay: 0.1s; 32 | } 33 | .circle:nth-child(2) { 34 | inset: 50px; 35 | transition-delay: 0.2s; 36 | } 37 | .circle:nth-child(3) { 38 | inset: 75px; 39 | transition-delay: 0.3s; 40 | } 41 | .circle:nth-child(4) { 42 | inset: 100px; 43 | transition-delay: 0.4s; 44 | } 45 | .circle:nth-child(5) { 46 | inset: 125px; 47 | transition-delay: 0.5s; 48 | } 49 | .card:hover { 50 | transform: rotate3d(1, 1, 0, 60deg); 51 | } 52 | .card:hover .circle:nth-child(1) { 53 | transform: translate3d(0, 0, 30px); 54 | } 55 | .card:hover .circle:nth-child(2) { 56 | transform: translate3d(0, 0, 60px); 57 | } 58 | .card:hover .circle:nth-child(3) { 59 | transform: translate3d(0, 0, 90px); 60 | } 61 | .card:hover .circle:nth-child(4) { 62 | transform: translate3d(0, 0, 120px); 63 | } 64 | .card:hover .circle:nth-child(5) { 65 | transform: translate3d(0, 0, 150px); 66 | } 67 | 68 | --------------------------------------------------------------------------------