CSS3 DIV Rotating Animation Effect

Every web designer will like to play with div tag. Div is very usefull tag for web designer/ front end developer,
if you are using div with css3 properties so you can do a lots of things. Today, In this article we will create a simple div animation with css3 using “keyframes” & “transform” properties.


<section class="container">
    <div class="color01">
        <div class="color02">
            <div class="color03">
                <div class="color04">
                    <div class="color05">
                        <div class="color06">
                            <div class="color01">
                                <div class="color02">
                                    <div class="color03">
                                        <div class="color04">
                                            <div class="color05">
                                                <div class="color06">
                                                    <div class="color01">
                                                        <div class="color02">
                                                            <div class="color03">
                                                                <div class="color04">
                                                                    <div class="color05 center-div"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

body {
    margin: 0;
    padding: 0;
    display: flex;
      overflow: hidden;
}
.container {
    width: 400px;
    height: 400px;
    margin: 120px auto;
  overfolow:hidden;
}
.container div {
    width: auto;
    height: auto;
    padding: 10px;
    /*box-sizing: content-box;*/
    animation: olympic 500s linear infinite;
}
.container div.center-div {
    width: 50px;
    height: 50px;
    margin: auto;
}
.color01 {
    background-color: #1f1133;
}
.color02 {
    background-color: #5a1e40;
}
.color03 {
    background-color: #bc433f;
}
.color04 {
    background-color: #898dd8;
}
.color05 {
    background-color: #8fdad4;
}
.color06 {
    background-color: #a4ce6b;
}

@keyframes olympic {
    to {
        transform: rotate(-1800deg);
    }
}

Leave a Reply