.view {
    position: initial;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    perspective: 400;
}

.plane {
    width: 170px;
    height:170px;
    transform-style: preserve-3d;
}

    .plane.main {
        position: relative;
        top: 120px;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        transform: rotateX(60deg) rotateZ(-30deg);
        -webkit-animation: rotate 20s infinite linear;
        animation: rotate 20s infinite linear;
    }

        .plane.main .circle {
            width: 180px;
            height: 180px;
            position: absolute;
            transform-style: preserve-3d;
            border-radius: 100%;
            box-sizing: border-box;
            box-shadow: 0 0 70px #27BCD1, inset 0 0 60px #0083bf;
        }

            .plane.main .circle::before, .plane.main .circle::after {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 10%;
                height: 10%;
                border-radius: 100%;
                background: #0083bf;
                box-sizing: border-box;
                box-shadow: 0 0 20px 2px #16ffd7;
            }

            .plane.main .circle::before {
                transform: translateZ(-120px);
            }

            .plane.main .circle::after {
                transform: translateZ(120px);
            }

            .plane.main .circle:nth-child(1) {
                transform: rotateZ(72deg) rotateX(63.435deg);
            }

            .plane.main .circle:nth-child(2) {
                transform: rotateZ(144deg) rotateX(63.435deg);
            }

            .plane.main .circle:nth-child(3) {
                transform: rotateZ(216deg) rotateX(63.435deg);
            }

            .plane.main .circle:nth-child(4) {
                transform: rotateZ(288deg) rotateX(63.435deg);
            }

            .plane.main .circle:nth-child(5) {
                transform: rotateZ(360deg) rotateX(63.435deg);
            }

@-webkit-keyframes rotate {
    0% {
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotateX(0) rotateY(0) rotateZ(0);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}