SCSS
html, body{
height: 100%;
width: 100%;
background: #333;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
perspective: 780px;
}
.inner {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 50%;
&.one {
left: 0%;
top: 0%;
animation: rotate-one 1.15s linear infinite;
border-bottom: 6px solid #ecf0f1;
}
&.two {
right: 0%;
top: 0%;
animation: rotate-two 1.15s linear infinite;
border-right: 6px solid #ecf0f1;
}
&.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1.15s linear infinite;
border-top: 6px solid #ecf0f1;
}
}
@keyframes rotate-one {
0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}
@keyframes rotate-two {
0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}
@keyframes rotate-three {
0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}
1 Response