CSS: rotate background images

Tweet

We can use CSS to rotate elements in a web page. You may already know about it, but a friend of mine asked me how to rotate a background image, without rotating the container.
Hmmm... that was a question, but the answer surprised me when I found how to do it.
Are you interested? Well, get into the article and see how to do it.

JavaScript: 3D rotating images

Tweet

I've recently needed to display products in 3D. It is a quite often requested feature, especially for commercial web sites, where items need to be shown from different perspectives.

Different solutions are available, but they usually contemplate the use of Flash or Java Applets. I must say, I don't like that kind of tools, especially Flash, because they require the installation of specific plugins on the client machine.

I started to search a JavaScript solution as soon as I realised that animated gifs involved a big (BIG!) work and not satisfactory result.
I knew that if the client have JavaScript disabled, it might pose a problem as well. However detecting JavaScript status and creating fallbacks is not a big issue. Thus I decided to follow the JavaScript solution.

What I've found is a remarkable script that I would like to share: 3D rotating images.
The author (Mark "Tarquin" Wilton-Jones) explains the script thoroughly in his page, so I won't get into it too much. It is enough to say that the script:

"[...] allows a normal image of a product to be replaced by images that appear to rotate. The images can be rotated or tilted automatically, or manually by the user. Manually, they can be changed using buttons, links, or simply by dragging the image with a mouse. Basic zooming is also possible. All of these features can be seamlessly combined, so the image could begin rotating automatically, then the user could take over and rotate it manually."

Just follow the above link and enjoy.

CSS: Vertical text

Tweet

Have you ever needed to create a vertical text? Something like:

Vertical Text

It is very simple and straight forward. We can use CSS to achieve that, the only issue we have to consider is compatibility (ah! that is new, isn't it?).