Разумеется, я осознаю, что полученный результат выглядит не слишком привлекательно, и, признаться, я и сам не использую skew слишком часто; однако я убежден, что существуют интересные способы применения этого преобразования.
Например, skew может использоваться на текстовых блоках, чтобы создавать трехмерные визуализации на основе семантической разметки и CSS3 (рис. 4.13 и 4.14).
Рис. 4.13. Демо Пола Хэйза использует skew и переходы для создания трехмерных кубов из простых кусков гипертекста (http://www.paulrhayes.com/experiments/cube/multiCubes.html)
Рис. 4.14. The Web Trend Map использует skew, чтобы разместить аватары на изометрической сетке, таким образом создавая уникальные визуализации данных на основе плоских элементов (http://www.webtrendmap.com/)
Наконец, преобразование translate позволяет сдвигать элемент относительно его обычного положения на экране, используя координаты x, y.
Например, если в состоянии hover хочется сдвинуть изображение с его начального положения, можно применить преобразование translate. Применив переход, такое движение можно плавно анимировать.
Представленный ниже код сдвинет изображение на 20px вправо и на 40px вниз относительно изначального положения (рис. 4.15):
Рис. 4.15. Использование преобразования translate для сдвига изображения в состоянии: hover
ul.gallery li a: hover img {
-webkit-transform: scale(1.5) translate(20px, 40px);
-moz-transform: scale(1.5) translate(20px, 40px);
-o-transform: scale(1.5) translate(20px, 40px);
transform: scale(1.5) translate(20px, 40px);
}
Если нужно сдвинуть изображение влево и/или вверх, используются отрицательные значения: например, translate (–20px, –40px).
Как и вышеупомянутые преобразования, translate не затрагивает остальные элементы в документе и сдвигает указанный элемент именно туда, куда нужно. Это означает, что не нужно думать о полях, отступах, абсолютном позиционировании и об использовании свойства clear для плавающих элементов. Достаточно дать translate нужные координаты, и элемент встанет на указанное место.
Пример фотогалереи показал, как преобразования scale, rotate, skew и translate могут сочетаться с переходами, чтобы создавать более яркий дизайн. Ключ к использованию этих преобразований с умом заключается в том, чтобы находить подходящие ситуации, в которых преобразования помогут рассказывать историю того, что показывается на экране.
Опять-таки очень легко увлечься преобразованиями, потому что они классные и их легко использовать. Но крайне важно находить подходящие места для их применения, чтобы получить лучший продукт.
Вернемся к сайту-примеру с Луной, где я использовал различные преобразования и переходы, чтобы оживить взаимодействие с фотогалереей (рис. 4.16).
Рис. 4.16. Фотогалерея на сайте Things We Left on the Moon
Когда наводишь на любую оставленную на Луне вещь, изображение реагирует особенным образом, в зависимости от того, что это за предмет: пончик, газонокосилка, кошка и т. д.
Добавлять подходящие преобразования и переходы на каждый элемент не только приятно и легко, но также никак не влияет на браузеры, которые не поддерживают CSS3-механизмы, благодаря которым такое взаимодействие возможно.
Пройдемся по всем элементам и посмотрим, как scale, rotate, позиционирование и opacity сочетаются с переходами, создавая полноценное взаимодействие.
Если подумать о каждом предмете и в особенности о его значении, можно применить преобразование и/или переход, который поможет раскрыть смысл этого предмета.
Как большой пончик или откидное кресло будут реагировать на взаимодействие? Мы можем выбрать и применить подходящие CSS3-приемы, чтобы улучшить дизайн (рис. 4.17).
Рис. 4.17. Предметы, которые будем преобразовывать
Семантика разметки этой искусственной карусели странных вещей очень проста: обычный упорядоченный список, составленный из картинок-ссылок, с поясняющим заголовком под каждой картинкой.
1 big doughnut
1 lawnmower
