Getting Started with CSS3 Transforms

Translated from: CSS transitions 101
Chinese: Introduction to CSS3 Transforms
Original author: Jason Cranford Teague
Translator: Shen Fei
Please respect copyright and indicate the source when reprinting, thank you!

Although people expect some changes on the screen, CSS and HTML can do too little for interaction in the page, and those still need to be implemented in code.

For example, a link is either this color or that color; a text area is either this big or that big; a picture is either transparent or opaque; they change directly from one state to another - in between There is no transition .

This results in most web pages being somewhat rigid, as elements only switch or change rigidly.

Yes, you can overdo it using DHTML, jQuery, or writing your own JS, but this requires more code to implement what should be a very simple functionality.

What we need is a quick and easy way to add simple transition effects to the page. In this article, you will find useful information about CSS transitions and how to use them.

A few months ago, I suggested that designers should start using the new CSS 3 technologies to achieve some basic functionality they had been craving for a long time - the only problem was that none of these technologies were available in IE, including IE8.

The view that some readers believe that those technologies will be invisible to 75% of users is unreliable.

To those readers out there I want to say, "Hold on tight" because I'm about to introduce you to another new CSS property that allows you to add cool transformation effects to any element with just a few lines of code.

CSS transforms were just introduced in CSS 3, but have been added as a webkit extension. That is, now they can only be used in webkit-based browsers, including Apple Safari and Google Chrome. However, judging from the Opera 10.5 pre-Alpha version, Opera will support CSS 3 transformations in the next 10.5. So to see the actual effects mentioned in this article, it is strongly recommended that you use Chrome or Safari 4 to view this article .

Transforms used to be just part of Webkit, and the basis for some cool stuff that Safari UI could do that other browsers couldn't.

However, the W3C CSS Working Group has refused to add transformations to its official features, with some members insisting that transformations are not CSS properties and would be better handled through scripts. (I’m full of confidence. I had a similar point of view in the previous paragraph and discussed it with Gao Gao . I think CSS animation is beyond the scope of performance. Interactive things should be implemented with scripts. But later, under the guidance of Brother Gui , I started to With a new understanding - Shen Fei)

But many designers and developers, myself included, insist that these are indeed styles - just dynamic styles, rather than the traditional static styles we use every day.

Fortunately, the dynamic styling debate is a thing of the past. Last March, representatives from Apple and Mozilla began adding CSS transform modules to CSS 3 features , very close to what Apple had already added to WebKit.

Before we continue, let me emphasize this: Never make a website's functionality dependent on a style if the style is not browser-universal (that is, supported by all commonly used browsers).

For those who missed it, I emphasize once again: Never let the functionality of a website depend on style, if the style is not universal across browsers .

That said, you can use styles, like transforms, as design enhancements to improve the user experience—without sacrificing usability for users who can’t see them. If it works without CSS transforms and users can still complete their tasks, then it's OK and you can use CSS transforms.