This has been a fairly long running project for me which was to create a copy of my logo with circular white text rotating around the ring.
My previous effort using processing hit the serious flaw of crashing some people’s browsers so I chose to attempt to achieve the same thing without using any browser plugins, meaning only HTML, CSS, Javascript and php.
Firefox, Opera and Chrome allow ‘relatively’ easy rotation using CSS. Shown here.
-webkit-transform: rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform: rotate(90deg);
-moz-transform-origin: 0 0;
-o-transform: rotate(90deg);
-o-transform-origin: 0 0;
There is an ancient feature for IE dating back to 5.5 which allows for rotation but it works differently. After a huge amount of experimenting with this I decided to abandon this method because of issues with browser compatibility and the impractical amount of HTML and CSS code generated by php for each individual letter.
So I decided to try using php GD to write the text to a .png file which could then be rotated using a jQuery function I had found.
The php imports the last twitter post, explodes it into an array, the script loops through the array calculating the position and rotation then writing to the png.
I will publish the source in a seperate post.
It can now be seen here:
http://www.joredwood.co.uk/content/twitlogo4/