Check it: CSS3 Tweet Scroller
Caveat: This currently only works on Safari. It may work on a bleeding edge Chrome dev build but I haven't tried that.
There are some other examples of this type of scrolling effect out there but I wanted to make one for tweets. I also noticed that there are some odd effects if you naively keep appending content to a div that's been rotated in 3-D. As it reaches a certain height, webkit apparently starts downsampling (I guess to save memory in the rendering pipeline? A limitation of hardware? Who knows) and you get this pixelated effect:
|This isn't a downsampled down screen shot. It actually looks like this if you let the rotated div get too large.|
So instead of putting all of the tweets into the same rotated div, I rotate each tweet element individually and that seems to fix the problem. Also, I start deleting tweets at the top (where you can no longer see them anyways) after a while, just to keep the dom size down. They are now readable and the CPU is happy.
Also, the background is generated dynamically using the Canvas element. I wanted a more realistic looking star field so I did some research on the distribution of star sizes and colors to see if I could perhaps simulate it with a Pareto distribution. Turns out the distribution of star colors and brightness is some other weird distribution so I just made it more or less random, with smaller stars slightly more frequent than larger stars.