CSS3 Pendulum
A little swinging pendulum made in CSS3 using transform, animation, and keyframes.
(Source located under the demo)
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Pendulum by Samer Ziadeh</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css3-pendulum.css" />
</head>
<body>
<div id="wrapper">
<div id="pendulum">
<div id="top-bolt" class="bolt"> </div>
<div id="top-bolt-vertical-ridge" class="ridge top-ridge vertical-ridge"> </div>
<div id="top-bolt-horizontal-ridge" class="ridge top-ridge horizontal-ridge"> </div>
<div id="bottom-bolt" class="bolt"> </div>
<div id="bottom-bolt-vertical-ridge" class="ridge bottom-ridge vertical-ridge"> </div>
<div id="bottom-bolt-horizontal-ridge" class="ridge bottom-ridge horizontal-ridge"> </div>
<div id="rectangle"> </div>
<div id="circle"> </div>
</div>
</div>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
background: none repeat scroll 0 0 #fff;
}
#wrapper {
width: 1000px;
margin: 20px auto;
}
#pendulum {
position: relative;
margin: 0 auto;
width: 50px;
-moz-transform-origin: 50% 20px;
-moz-animation-duration: 2s;
-moz-animation-name: pendulum;
-moz-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 20px;
-webkit-animation-duration: 2s;
-webkit-animation-name: pendulum;
-webkit-animation-iteration-count: infinite;
transform-origin: 50% 20px;
animation-duration: 2s;
animation-name: pendulum;
animation-iteration-count: infinite;
}
.bolt {
position: absolute;
left: 50%;
z-index: 3;
margin: 10px 0 0 -8px;
width: 15px;
height: 15px;
background: none repeat scroll 0 0 #cc6;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0 0 10px rgba(51, 51, 51, 0.5);
-webkit-box-shadow: 0 0 10px rgba(51, 51, 51, 0.5);
box-shadow: 0 0 10px rgba(51, 51, 51, 0.5);
}
#top-bolt { top: 0; }
#bottom-bolt { top: 460px; }
.ridge {
position: absolute;
top: 0;
left: 50%;
z-index: 3;
background: none repeat scroll 0 0 rgba(51, 51, 51, 0.5);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
.vertical-ridge {
margin: 10px 0 0 -1px;
width: 1px;
height: 15px;
}
.horizontal-ridge {
margin: 17px 0 0 -8px;
width: 15px;
height: 1px;
}
.bottom-ridge { top: 460px; }
#rectangle {
position: relative;
z-index: 2;
width: 50px;
height: 500px;
background: none repeat scroll 0 0 #39c;
-moz-border-radius: 5px 5px 50px 50px;
-webkit-border-radius: 5px 5px 50px 50px;
border-radius: 5px 5px 50px 50px;
-moz-box-shadow: 0 0 10px rgba(51, 51, 51, 0.5);
-webkit-box-shadow: 0 0 10px rgba(51, 51, 51, 0.5);
box-shadow: 0 0 10px rgba(51, 51, 51, 0.5);
}
#circle {
position: relative;
top: -80px;
left: -38px;
z-index: 1;
width: 125px;
height: 125px;
background: none repeat scroll 0 0 #39c;
-moz-border-radius: 125px;
-webkit-border-radius: 125px;
border-radius: 125px;
-moz-box-shadow: 0 0 10px rgba(51, 51, 51, 0.5);
-webkit-box-shadow: 0 0 10px rgba(51, 51, 51, 0.5);
box-shadow: 0 0 10px rgba(51, 51, 51, 0.5);
}
@-moz-keyframes pendulum {
from { -moz-transform: rotate(-15deg); }
50% { -moz-transform: rotate(15deg); }
to { -moz-transform: rotate(-15deg); }
}
@-webkit-keyframes pendulum {
from { -webkit-transform: rotate(-15deg); }
50% { -webkit-transform: rotate(15deg); }
to { -webkit-transform: rotate(-15deg); }
}
@keyframes pendulum {
from { transform: rotate(-15deg); }
50% { transform: rotate(15deg); }
to { transform: rotate(-15deg); }
}
