4. Преобразовывая содержимое

4. Преобразовывая содержимое

Как и CSS-переходы, CSS-трансформации были изначально разработаны командой WebKit, и затем их включили в два отдельных рабочих черновика W3C:

1. CSS 2D-преобразования (http://www.w3.org/tR/Css3-2d-transforms/);

2. CSS 3D-преобразования (http://www.w3.org/tR/Css3-3d-transforms/).

В этой книге мы поговорим исключительно о 2D-преобразованиях, так как прямо сейчас они больше всего пригодны для использования. Знанием о 3D-преобразованиях можно написать отдельную книгу, и они прекрасны, волшебны. Но у 2D-преобразований (как и у переходов) лучше обстоят дела с поддержкой браузерами: Safari 3.2, Chrome 3.2, Firefox 4.0, Opera 10.5.

Итак, что такое CSS-преобразования? W3C описывает их так:

CSS 2D-преобразования позволяют преобразовывать на плоскости элементы, отображенные посредством CSS9[9].

Здорово, все понятно. Лучший способ понять, что такое преобразования, – увидеть их в действии.

Давайте сначала посмотрим на простой пример: будем применять различные плоские преобразования к небольшой фотогалерее. Затем (в этой главе) мы воспользуемся теми же приемами на практике на сайте о Луне.