I recently saw an article on CSS text rotation on the internets and decided to try my own experiement.
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. So I began to wonder, if I have a line, and I setup a javascript timer can I rotate it every second?
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. So that won’t work for this clock. Here’s the IE rotate property anyways
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);So 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 (so I can position the clock hands)
#clock {
margin: 25px;
float: left;
width: 100px;
height: 100px;
position: relative;
}After getting the clock, I need a second hand, a minute hand and an hour hand. Originally I just 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. So 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.
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);
})();If you enjoyed reading this post, check out this post Using CSS3’s :target pseudo-class to Make a Slideshow.
That’s simpler than my clock, which uses a canvas element and is based on CoolClock. Well done.
[...] This post was Twitted by css3watcher [...]
wow, this thing is really cool and only got 2 comments? :( now here is the third one :)
ps. Nice work, keep posting more cool stuff I will check back again.