A Pen by Prashant Sani.

Gandhijis-Charkha-in-Pure-CSS3.markdown

Gandhiji's Charkha in Pure CSS3

Experimental project demonstrating Charkha in CSS3

A Pen by Prashant Sani on CodePen.

License.

index.html

<h1>Charkha in Pure CSS3</h1>
<div class="wrap">
  <!--
      Gandhiji's Charkha in Pure CSS3 and HTML5.
      Proudly Powered by an Indian :) 
  -->
  <div class="charkhaContain">
    <div class="wheel" id="wheel"></div>
    <div class="wheelStand"></div>
    <div class="ropeTop"></div>
    <div class="ropeBottom"></div>
    <div class="charkhaBase"></div>
    <div class="smallWheel" id="smallWheel"></div>
    <div class="smallWheelStand"></div>
  </div>
</div><!-- wrap -->

script.js

var bigWheel = document.getElementById('wheel');
var smallWheel = document.getElementById('smallWheel');

for(i=0;i<9;i++){
  var innerDiv = document.createElement('div');
  smallWheel.appendChild(innerDiv);
}

for(i=0;i<12;i++){
  var innerDiv = document.createElement('div');
  bigWheel.appendChild(innerDiv);
}

style.css

*{margin: 0;padding: 0}
.wrap{
  width: 960px;
  margin: 20px auto ;
  position: relative;
}
.charkhaContain{
  height: 520px;
  position: relative;
}
.wheel{
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 400px;
  -moz-border-radius: 400px;
  border-radius: 400px;
  -webkit-animation: wheelAnim 6s backwards infinite linear;
  -moz-animation: wheelAnim 6s backwards infinite linear;
  -ms-animation: wheelAnim 6s backwards infinite linear;
  -o-animation: wheelAnim 6s backwards infinite linear;
  animation: wheelAnim 6s backwards infinite linear;
}
@-webkit-keyframes wheelAnim {
  0%   {  }
  100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes wheelAnim {
  0%   {  }
  100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes wheelAnim {
  0%   {  }
  100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes wheelAnim {
  0%   {  }
  100% { -o-transform: rotate(360deg);}
}
@keyframes wheelAnim {
  0%   {  }
  100% { transform: rotate(360deg);}
}
.wheel:after{
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  width: 360px;
  height: 360px;
  border: 2px solid #000;
  -webkit-border-radius: 180px;
  -moz-border-radius: 180px;
  border-radius: 180px;
}
.wheel div{
  position: absolute;
  top: -50px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -12px;
  border-right: 12px solid transparent; 
  border-left: 12px solid transparent; 
  border-bottom: 250px solid black; 
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
}
.wheel div:after{
  content: "";
  width: 12px;
  height: 18px;
  background-color: black;
  position: absolute;
  top: 49px;
  left: 50%;
  margin-left: -6px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
}
.wheel div:nth-child(1){
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
.wheel div:nth-child(2){
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
}
.wheel div:nth-child(3){
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.wheel div:nth-child(4){
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
}
.wheel div:nth-child(5){
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  -o-transform: rotate(150deg);
  transform: rotate(150deg);
}
.wheel div:nth-child(6){
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.wheel div:nth-child(7){
  -webkit-transform: rotate(210deg);
  -moz-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  -o-transform: rotate(210deg);
  transform: rotate(210deg);
}
.wheel div:nth-child(8){
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  -o-transform: rotate(240deg);
  transform: rotate(240deg);
}
.wheel div:nth-child(9){
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
.wheel div:nth-child(10){
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  -o-transform: rotate(300deg);
  transform: rotate(300deg);
}
.wheel div:nth-child(11){
  -webkit-transform: rotate(330deg);
  -moz-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  -o-transform: rotate(330deg);
  transform: rotate(330deg);
}
.wheel div:nth-child(12){
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.wheelStand{
  width: 25px;
  height: 330px;
  background-color: #333;
  position: absolute;
  top: 170px;
  left: 188px;
  z-index: 100;
}
.wheelStand:after{
  content: "";
  width: 700px;
  height: 20px;
  position: absolute;
  left: -30px;
  bottom: 30px;
  background-color: #333;
}
.ropeBottom,
.ropeTop{
  position: absolute;
  height: 1px;
  background: black;
  z-index: 0;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
.ropeTop{
  width: 630px;
  left: 267px;
  top: 30px;
  -webkit-transform: rotate(27deg);
  -moz-transform: rotate(27deg);
  -ms-transform: rotate(27deg);
  -o-transform: rotate(27deg);
  transform: rotate(27deg);
}
.ropeBottom{
  width: 620px;
  bottom: 138px;
  left: 200px;
  -webkit-transform: rotate(-1.57deg);
  -moz-transform: rotate(-1.57deg);
  -ms-transform: rotate(-1.57deg);
  -o-transform: rotate(-1.57deg);
  transform: rotate(-1.57deg);
}
.smallWheelStand{
  width: 7px;
  height: 115px;
  position: absolute;
  bottom: 70px;
  right: 141px;
  background-color: #333;
}
.smallWheelStand:before{
  content: "";
  position: absolute;
  top: 5px;
  left: 2px;
  width: 3px;
  height: 3px;
  background-color: white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.smallWheelStand:after{
  content: "";
  width: 25px;
  height: 29px;
  position: absolute;
  left: -9px;
  bottom: -49px;
  background-color: #333;
}
.smallWheel{
  position: absolute;
  top: 313px;
  right: 119px;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  -webkit-animation: wheelAnim 1.5s backwards infinite linear;
  -moz-animation: wheelAnim 1.5s backwards infinite linear;
  -ms-animation: wheelAnim 1.5s backwards infinite linear;
  -o-animation: wheelAnim 1.5s backwards infinite linear;
  animation: wheelAnim 1.5s backwards infinite linear;
}

.smallWheel div{
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -2px;
  border-right: 2px solid transparent; 
  border-left: 2px solid transparent; 
  border-bottom: 25px solid black;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
}
.smallWheel div:nth-child(1){
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
}
.smallWheel div:nth-child(2){
  -webkit-transform: rotate(80deg);
  -moz-transform: rotate(80deg);
  -ms-transform: rotate(80deg);
  -o-transform: rotate(80deg);
  transform: rotate(80deg);
}
.smallWheel div:nth-child(3){
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
}
.smallWheel div:nth-child(4){
  -webkit-transform: rotate(160deg);
  -moz-transform: rotate(160deg);
  -ms-transform: rotate(160deg);
  -o-transform: rotate(160deg);
  transform: rotate(160deg);
}
.smallWheel div:nth-child(5){
  -webkit-transform: rotate(200deg);
  -moz-transform: rotate(200deg);
  -ms-transform: rotate(200deg);
  -o-transform: rotate(200deg);
  transform: rotate(200deg);
}
.smallWheel div:nth-child(6){
  -webkit-transform: rotate(240deg);
  -moz-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  -o-transform: rotate(240deg);
  transform: rotate(240deg);
}
.smallWheel div:nth-child(7){
  -webkit-transform: rotate(280deg);
  -moz-transform: rotate(280deg);
  -ms-transform: rotate(280deg);
  -o-transform: rotate(280deg);
  transform: rotate(280deg);
}
.smallWheel div:nth-child(8){
  -webkit-transform: rotate(320deg);
  -moz-transform: rotate(320deg);
  -ms-transform: rotate(320deg);
  -o-transform: rotate(320deg);
  transform: rotate(320deg);
}
.smallWheel div:nth-child(9){
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}
.wheelStand:before{
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: 25px;
  left: 7px;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}