Повернутое Солнце

Повернутое Солнце

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

^{Рис. 4.09. Outside, приложение для iPhone, использует rotate, чтобы вращать Солнце}

В самом верху страницы показывается изображение Солнца (рис. 4.10), которое вращается на 360° с помощью преобразования rotate. (В этом случае JavaScript используется для анимации поворота в браузерах, работающих на отличном от WebKit движке, но в шестой главе мы поговорим об анимациях, построенных на чистом CSS.) Это изящное улучшение дизайна просто и уместно, так как оно имитирует ту же анимацию Солнца, которая появляется в самом приложении на iPhone. Солнце не вращается в браузерах, которые не поддерживают CSS-преобразования, и это нормально. Ничто не выглядит неработающим в неанимированной версии сайта.

Преобразования в сочетании с переходами в CSS могут помочь поддержать общее сообщение, которое несет дизайн, создаваемый для веба, и это прекрасный инструмент для нас, веб-дизайнеров.

^{Рис. 4.10. Графика на сайте приложения Outside оживает с помощью позиционирования и вращения на CSS}