HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="Software RVG html,css,javascript ,svg Editor (www.software-rvg.com)">
<meta name="dcterms.created" content="ma., 07 jun. 2016 21:26:49 GMT">
<meta name="description" content="3D DESIGNS CSS ANIMATION">
<meta name="keywords" content="SOFTWARE RVG,CSS,SVG,JAVASCRIPT,3D ANIMATION,ROTATION,TRASLATION,TRANSFORM,GRADIANT OF COLORS,">
<title>3D ADVANCED DESIGNS by SOFTWARE RVG SVG2 CSS 3D ANIMATION</title>
<div class="canvas">
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<div class="circle circle--aqua"></div>
<div class="circle circle--gold"></div>
<div class="circle circle--tomato"></div>
<style>
/* Main styles */
body {
min-height: 450px;
height: 100vh;
margin: 0;
background: radial-gradient(circle,#FF0000, #1f4f96, #1b2949, #000000 );
} }
</style>
SCSS
$canvas-size: 800px;
$circle-size: 800px;
$circle-border: 1px;
$circles: 126;
$animation-duration: 5s;
$colors: aqua gold tomato;
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 160vh;
overflow: hidden;
background-color: #FF0000;
transform-style: preserve-3d;
perspective: 800px;
}
.canvas {
position: relative;
width: 100%;
height: 100%;
max-width: $canvas-size;
max-height: $canvas-size;
transform-style: preserve-3d;
transform: rotateX(60deg);
}
.circle {
position: absolute;
box-sizing: border-box;
border-width: $circle-border;
border-style: solid;
border-radius: 50%;
will-change: transform;
}
@each $color in $colors {
.circle--#{'' + $color} {
border-color: $color;
}
}
@keyframes circle-tilt {
0%, 100% {
transform: rotateY(0deg) rotateX(0deg);
}
15%, 45% {
transform: rotateY(40deg) rotateX(0deg);
}
30%, 60% {
transform: rotateY(-40deg) rotateX(0deg);
}
70% {
transform: rotateY(0deg) rotateX(-60deg);
}
80% {
transform: rotateY(0deg) rotateX(10deg);
}
90% {
transform: rotateY(0deg) rotateX(-60deg);
}
}
@for $circle from 1 through $circles {
.circle:nth-child(#{$circle}) {
$size: $circle-size - ($circle * ($circle-border * 4));
$delay: 1s - (($circle) / $circles * 1s);
top: calc(50% - #{$size / 2});
left: calc(50% - #{$size / 2});
width: $size;
height: $size;
animation: circle-tilt $animation-duration $delay infinite;
}
}
