HTML
<meta name="generator" content="Software RVG HTML,CSS,SVG,javascript Editor (www.software-rvg.com)">
<meta name="dcterms.created" content="sa., 17 ago. 2016 01:25:28 GMT">
<meta name="Software RVG Designs...designing Future" content="css,,development,by;Software-RVG">
<meta name="css 3D animations" content="css,,Software RVG,3D animation,designs,creative work,artistic work">
<title>css animation "Galaxy"</title>
<div class="view">
<div class="plane main">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="view">
<div class="plane main">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="view">
<div class="plane main">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
CSS
html, body {
background:#111111 ;
overflow: hidden;
width: 100%;
height: 100%;
}
.view {
position: ;
top:5px;
left: 90px;
right: 0;
bottom: 0;
-webkit-perspective: 400;
perspective: 400;
}
.view {
position: ;
top: 5px;
left: 90px;
right: 0;
bottom: 0;
-webkit-perspective: 400;
perspective: 400;
}
.plane {
width: 120px;
height: 120px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.plane.main {
position: absolute;
top: 100px;
left: 50px;
right: 40px;
bottom: 0;
margin: auto;
-webkit-transform: rotateX(60deg) rotateZ(-30deg);
transform: rotateX(60deg) rotateZ(-30deg);
-webkit-animation: rotate 20s infinite linear;
animation: rotate 20s infinite linear;
}
.plane.main .circle {
width: 120px;
height: 120px;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
border-radius: 100%;
box-sizing: border-box;
box-shadow: 0 0 160px #ffffff, inset 0 0 20px #ff0000;
}
.plane.main .circle::before, .plane.main .circle::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 3%;
height: 100%;
border-radius: 100%;
background:#FA5858;
box-sizing: border-box;
box-shadow: 1 1 1px 1px ;
}
.plane.main .circle::before {
-webkit-transform: translateZ(-90px);
transform: translateZ(-90px);
}
.plane.main .circle::after {
-webkit-transform: translateZ(90px);
transform: translateZ(90px);
}
.plane.main .circle:nth-child(1) {
-webkit-transform: rotateZ(72deg) rotateX(63.435deg);
transform: rotateZ(72deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(2) {
-webkit-transform: rotateZ(144deg) rotateX(63.435deg);
transform: rotateZ(144deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(3) {
-webkit-transform: rotateZ(216deg) rotateX(63.435deg);
transform: rotateZ(216deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(4) {
-webkit-transform: rotateZ(288deg) rotateX(63.435deg);
transform: rotateZ(288deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(5) {
-webkit-transform: rotateZ(360deg) rotateX(63.435deg);
transform: rotateZ(360deg) rotateX(63.435deg);
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
