I recently saw an article on CSS text rotation on the internets and decided to try my own experiment.
What I wanted to make was a clock. The basis of this project is using the -webkit-transform:rotate(0deg); css property. This allows you to rotate any object 360 degrees. I began to wonder, if I have a line, and I setup a javascript timer can I rotate it every second?
See the Pen VYoqwj by Jon Rohan (@jonrohan) on CodePen.
The design is inspired by @eston’s Sarai desktop.
This clock won’t work in IE. There is an IE rotate property, but it only rotates at 0, 90, 180, 270. That won’t work for this clock, because we need more than only four angles. Here’s the IE rotate property anyways
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);How did I do it?
I started with an external div for the clock. Giving it a width and height of 100px and position relative. This is to position the clock hands.
#clock {
width:208px;
height:208px;
position:relative;
}After getting the clock, I need a second hand, a minute hand and an hour hand. Originally I used a side border on the hands, but realized that the rotate property rotates the object at it’s center, and not at it’s end. To create the hands, I gave them a border top equal to the length of the hand, then a height to offset the border, and some margin to vertically align.
<div id="clock">
<div class="ten_min" style="-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);"></div>
<div class="ten_min" style="-moz-transform:rotate(30deg);-webkit-transform:rotate(30deg);"></div>
<div class="ten_min" style="-moz-transform:rotate(60deg);-webkit-transform:rotate(60deg);"></div>
<div class="ten_min" style="-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);"></div>
<div class="ten_min" style="-moz-transform:rotate(120deg);-webkit-transform:rotate(120deg);"></div>
<div class="ten_min" style="-moz-transform:rotate(150deg);-webkit-transform:rotate(150deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(6deg);-webkit-transform:rotate(6deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(12deg);-webkit-transform:rotate(12deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(18deg);-webkit-transform:rotate(18deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(24deg);-webkit-transform:rotate(24deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(36deg);-webkit-transform:rotate(36deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(42deg);-webkit-transform:rotate(42deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(48deg);-webkit-transform:rotate(48deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(54deg);-webkit-transform:rotate(54deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(66deg);-webkit-transform:rotate(66deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(72deg);-webkit-transform:rotate(72deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(78deg);-webkit-transform:rotate(78deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(84deg);-webkit-transform:rotate(84deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(96deg);-webkit-transform:rotate(96deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(102deg);-webkit-transform:rotate(102deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(108deg);-webkit-transform:rotate(108deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(114deg);-webkit-transform:rotate(114deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(126deg);-webkit-transform:rotate(126deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(132deg);-webkit-transform:rotate(132deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(138deg);-webkit-transform:rotate(138deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(144deg);-webkit-transform:rotate(144deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(156deg);-webkit-transform:rotate(156deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(162deg);-webkit-transform:rotate(162deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(168deg);-webkit-transform:rotate(168deg);"></div>
<div class="min_mark" style="-moz-transform:rotate(174deg);-webkit-transform:rotate(174deg);"></div>
<div id="sec"></div>
<div id="min"></div>
<div id="hour"></div>
</div>#sec {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
border-top:104px solid #353535;
height:104px;
left: 104px;
position:absolute;
top: 0;
width:2px;
}
#min {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border-top:104px solid #353535;
height:104px;
position: absolute;
left: 102px;
top: 0;
width:4px;
}
#hour {
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
border-top: 52px solid rgb(53, 53, 53);
height: 52px;
left: 104px;
position: absolute;
top: 52px;
width: 5px;
}
#clock .ten_min {
border-bottom:10px solid #353535;
border-top:10px solid #353535;
height:208px;
left:104px;
margin:0;
position:absolute;
top:-9px;
width:5px;
}
#clock .min_mark {
border-bottom:5px solid #353535;
border-top:5px solid #353535;
height:208px;
left:104px;
margin:0;
position:absolute;
top:-4px;
width:1px;
}The tick marks are also the lines, with a top and bottom border rotated 180 degrees.
The javascript is a simple timer which updates the degrees of each hand based on the time.
(function(){
var tick = function() {
var now = new Date();
$("#sec").css({"-moz-transform":"rotate(" + (now.getSeconds() * 6) + "deg)",
"-webkit-transform":"rotate(" + (now.getSeconds() * 6) + "deg)"});
$("#min").css({"-moz-transform":"rotate(" + (now.getMinutes() * 6) + "deg)",
"-webkit-transform":"rotate(" + (now.getMinutes() * 6) + "deg)"});
$("#hour").css({"-moz-transform":"rotate(" + (now.getHours() * 30) + "deg)",
"-webkit-transform":"rotate(" + (now.getHours() * 30) + "deg)"});
};
setInterval(tick,1000);
})();Support for CSS3 2D Transforms
| IE | Firefox | Chrome | Safari | Android | iOS |
|---|---|---|---|---|---|
| 9+ | 3.5+ | 4+ | 3.1+ | 2.1+ | 3.2+ |