Как и прежде, та часть сайта, которую мы решили полностью реализовывать на CSS3 в этом конкретном примере, – это уровень взаимодействия: когда на фотографию наводят курсор, мы предлагаем улучшенное представление. Отсутствие такого эффекта некритично для тех браузеров, которые не поддерживают эти свойства.

Например, пользователи Internet Explorer увидят лишь фотогалерею, составленную из маленьких изображений, на которые можно нажимать; это нормально. Если бы вид и поведение элементов в состоянии hover были бы критичны, тогда нам потребовалось бы переосмыслить использование CSS3.

Кроме масштабирования, есть еще три преобразования, которыми можно поворачивать, крутить и сдвигать элементы (сдвиг производится по координатам x, y). Добавим каждое преобразование в получившуюся фотогалерею, чтобы быстро разобраться, как они работают.

Допустим, нам нужно поворачивать фотографию, когда на нее наводят курсор, одновременно с этим масштабируя ее, как и ранее. Мы можем добавить преобразование rotate к правилу

:

 

Мы по-прежнему увеличиваем фотографию в состоянии hover, но также поворачиваем ее на 10 градусов влево преобразованием

(рис. 4.05). Оно работает в Safari, Chrome, Firefox и Opera. Отрицательные значения от  до  поворачивают элемент против часовой стрелки; положительные значения от  до  – по часовой стрелке.

Рис. 4.05. Фото в состоянии hover, увеличенное и повернутое влево при помощи преобразования rotate

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

(рис. 4.06).

< image l:href="#"/>

Рис. 4.06. С помощью rotate можно представить фотографии разбросанными по странице.

В этой небольшой книге я подчеркиваю, что самое подходящее место для использования CSS3 – уровень взаимодействия, но это не означает, что нельзя пользоваться этими приемами в стандартном представлении дизайна. Важно, чтобы используемые приемы не были критичными для пользователя и чтобы сайт выглядел приемлемо в менее современных браузерах.

Например, если браузер не поддерживает преобразование rotate и фотографии выглядят ровными, в этом нет беды. Сайт по-прежнему будет выглядеть работающим.

Хороший пример использования

в основном дизайне странице можно найти в блоге компании Panic Software , где применяются крайне малозаметные CSS3-повороты, которые поворачивают записи налево, как будто это листы бумаги, оставленные на столе (рис. 4.07). Такой эффект – не критически важная часть дизайна, и без поворота этот сайт также выглядит прекрасно (рис. 4.08).

Рис. 4.07. В дизайне блога Panic Software используются небольшие CSS3– повороты, чтобы добавить реалистичности

Рис. 4.08. Без поворота блог по-прежнему выглядит замечательно

Другой хороший пример подходящего использования CSS-преобразований – сайт Outside , прекрасного приложения о погоде для iPhone (рис. 4.09).