Nesting & Positioning as Groups

by mmansion

HTML

<!-- NESTING DIVS -->

<div id="group1" class="outer">
    <div class="inner r1"></div>
    <div class="inner r2"></div>
    <div class="inner r3"></div>
    <div class="inner r4"></div>
</div>

<div id="group2" class="outer">
    <div class="inner r1"></div>
    <div class="inner r2"></div>
    <div class="inner r3"></div>
    <div class="inner r4"></div>
</div>

CSS

#group1 {
    position: absolute;
}

#group2 {
    position: absolute;
    left: 100px;
    trasform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

.outer {
    width: 40px;
    height: 160px;
    background: lightblue;
}
.inner {
   width: 30px;
   height: 30px;
   background: green;
   border: thick solid white;
}

.r1 {
    trasform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
}

.r2 {
    trasform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
}

.r3 {
    trasform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

.r4 {
    trasform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
}