A while ago, the news reported that if you searched for the Chinese word “傾斜” (meaning “tilt”) on the mobile version of Google, the results page would lean to the right. This effect isn’t hard to make at all. It only takes one line of CSS, because it is one of the CSS 3 standards. For now, IE browsers don’t support this CSS 3 tilt syntax (including IE 9). Also, it isn’t really one line: each browser has its own syntax, so you have to write several lines. Hopefully this will improve in the future.

Introduction:

The tilt effect we're using today comes from the transform feature in CSS 3. With this property, you can create a simple animation using only CSS. Besides tilting a block, transform can also move, scale, apply perspective, and more. Today, though, we will only cover rotation, which is the tilting part of transform.

Syntax:

-webkit-transform: rotate(angle);
-moz-transform: rotate(angle);
-o-transform: rotate(angle);
-ms-transform:rotate(angle)
It's best to add all three lines at once so that "almost" all browsers can display the effect. Of course, for now IE-engine browsers still can't show this feature (IE 9 now supports it).
  • The -webkit line is for browsers that use the WebKit engine, such as Safari and Chrome.
  • The -moz line is for Firefox and other browsers that use the Firefox engine.
  • The -o line is for Opera.
  • The -ms line is for IE 9.
The unit for the angle is deg. For example, to tilt an img by one degree, the syntax is:
-webkit-transform: roate(1deg);
Sample file download: Box.net ｜ 4Shared ｜ Google ｜ Dropbox