HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .
Шрифт:
Интервал:
Закладка:
Значение в скобках всегда задается в градусах (например, 90deg). Положительные значения задают вращение по часовой стрелке, а отрицательные — против часовой стрелки. Можно также сойти с ума и задать элементу вращение, указав следующее значение:
transform: rotate(3600deg);
В результате элемент десять раз пройдет по полному кругу. Примеры практического применения данного конкретного значения можно пересчитать по пальцам, но вы знаете, что при создании сайтов для мукомольной компании вам это может пригодиться.
Наклон (skew)
Если вам приходилось работать в программе Photoshop, то чем занимается наклон, вы уже представляете. Он позволяет наклонить элемент по какой-либо из его осей или по двум осям сразу. Вот код нашего примера:
.skew:hover {
transform: skew(40deg, 12deg);
}
Установка этого правила для ссылки с псевдоклассом hover приведет при наведении указателя мыши на элемент к следующему эффекту.
Первое значение задает наклон применительно к оси X (в нашем примере это 40deg), а второе значение (12deg) предназначено для задания наклона по оси Y. Если опустить второе значение, то единственное имеющееся значение будет просто применено к оси X (горизонтальной оси), например:
transform: skew(10deg);
Матрица (matrix)
Кто-нибудь вспомнил одноименный и весьма переоцененный фильм? Нет? Что, простите? Вам хочется узнать о CSS3-матрице, а не о фильме? Ну что ж, хорошо.
Я не собираюсь вас обманывать. Думаю, что синтаксис матричного преобразования выглядит несколько страшновато. Рассмотрим пример кода:
.matrix:hover {
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
}
По сути, матрица позволяет объединять в одно объявление сразу несколько видов преобразований (масштабирование, вращение, наклон и т. д.). Предыдущее объявление реализуется в окне браузера в эффект, показанный на следующей странице.
Теперь мне нравятся сложные задачи, но я уверен, что нельзя не согласиться с тем, что этот синтаксис требует исследований. Лично я расстроился, глядя на спецификацию и понимая, что математические знания, требующиеся для полного осмысления, выходят за рамки моего рудиментарного уровня: http://www.w3.org/TR/css3-2d-transforms/.
совет
Если вам удается работать с анимацией в JavaScript, не прибегая к помощи анимационных библиотек, то, наверное, стоит поближе познакомиться и с матрицей. В ее синтаксисе вычисляются все остальные преобразования, поэтому, если вам удается осмысливать текущие представления о создании анимации с помощью JavaScript, нужно проверить на деле, сможете ли вы так же легко разобраться со значениями матрицы.
Матричные преобразования для ловкачей и остолопов. Представить меня математиком можно только с очень большой натяжкой, поэтому, сталкиваясь с необходимостью создания преобразований на основе матрицы, я немного жульничаю. Если ваши математические навыки также оставляют желать лучшего, рекомендую обратиться по адресу http://www.useragentman.com/matrix/.
Сайт Matrix Construction Set позволяет перетаскивать элемент, придавая ему в точности тот вид, который вас устраивает, после чего по старой доброй традиции забирать код с уже включенными в него префиксами производителей для вставки в свой файл CSS.
Свойство transform-origin
Обратите внимание на то, что при использовании CSS исходная точка преобразования, которую браузер использует в качестве центра, находится посередине — в 50 % протяженности элемента по оси X и в 50 % его протяженности по оси Y. Здесь прослеживаются существенные отличия от SVG-технологии, в которой такая точка по умолчанию находится в левом верхнем углу с координатами (0; 0).
Используя свойство transform-origin, можно изменить точку, в которой будет начинаться преобразование.
Рассмотрим наше прежнее матричное преобразование. По умолчанию точка начала преобразования transform-origin устанавливается в позицию '50% 50%' (в центре элемента). Средства разработчика Firefox показывают, как это преобразование применяется.
Теперь, если перенастроить значение transform-origin таким образом:
.matrix:hover {
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
transform-origin: 270px 20px;
}
то можно увидеть следующий эффект.
Первое значение задает смещение по горизонтали, а второе — по вертикали. Можно использовать ключевые слова. Например, left задает 0 % по горизонтали, right — 100 % по горизонтали, top — 0 % по вертикали и bottom — 100 % по вертикали. Вместо этого можно воспользоваться длиной, задавая для нее любые единицы измерения, используемые в CSS.
Если для значений свойства transform-origin используются проценты, то горизонтальное и вертикальное смещение задаются относительно высоты и ширины контейнера, содержащего элементы.
Если используется длина, то значения отмеряются от левого верхнего угла контейнера, содержащего элементы.
Полная информация о свойстве transform-origin может быть найдена на сайте http://www.w3.org/TR/css3-2d-transforms/.
Мы рассмотрели основы 2D-преобразований. Они намного более широко реализованы, чем их 3D-собратья, и предоставляют более эффективные средства для перемещения элементов по экрану, чем прежние методы, например абсолютное позиционирование.
Полная спецификация CSS3 2D Transforms Module Level 3 находится по адресу http://www.w3.org/TR/css3-2d-transforms/.
СОВЕТ
Более полно преимущества перемещения элементов с помощью преобразований рассмотрены в замечательной статье Пола Айриша (Paul Irish) (http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/), в которой представлен ряд весьма ценных данных.
А в качестве просто фантастического обзора того, как браузеры справляются с переходами и анимацией, и объяснения, почему преобразования могут быть столь эффектными, я настоятельно рекомендую следующую публикацию в блоге: http://blogs.adobe.com/webplatform/2014/03/18/css-animations-and-transitions-performance/.
CSS3 3D-преобразования
Рассмотрим наш первый пример — элемент, который переворачивается, когда на него наводится указатель мыши. Состояние наведения указателя используется здесь для инициирования изменения просто в целях иллюстрации, но переворот может быть легко вызван изменением класса (через код JavaScript) или получением элементом фокуса.
У нас будет два таких элемента: один с горизонтальным переворотом, другой — с вертикальным. Полный пример можно найти в файле каталога example_08-04. Изображения не могут обеспечить полное восприятие сути этой технологии, для этого лучше подойдет переворот элемента со сменой лицевой стороны с зеленой на красную с полной иллюзией того, что это происходит в трехмерном пространстве с привлечением перспективы. Посмотрите на копию экрана, сделанную на промежуточной фазе перехода от зеленого к красному, которая, надеюсь, в какой-то мере передает суть эффекта.
совет
Следует также иметь в виду, что при абсолютном позиционировании элемента с заданием значений top, left, bottom, right в пикселах промежуточные значения преобразований могут вычисляться по субпиксельным позициям.
Разметка для элемента, подвергаемого перевороту, имеет следующий вид:
<div class="flipper">
<span class="flipper-object flipper-vertical">
<span class="panel front">The Front</span>
<span class="panel back">The Back</span>
</span>
</div>
Единственным отличием в разметке горизонтального переворота является использование вместо класса flipper-vertical класса flipper-horizontal.
Поскольку большинство стилевых настроек направлено на улучшение эстетического восприятия, мы рассмотрим только самые важные ингредиенты в наших стилях, с помощью которых осуществляется переворот. Стили, задающие эстетическое восприятие, можно увидеть в полной таблице стилей данного примера.
Прежде всего нам нужно задать объекту с классом .flipper, внутри которого будет осуществляться переворот, определенную перспективу. Воспользуемся для этого свойством perspective. Ему задается длина, предназначенная для имитации расстояния от экрана просмотра до края 3D-пространства элементов.
Если для перспективы задать небольшое значение, например 20 пикселов, 3D-пространство элемента будет простираться только на эти 20 пикселов от плоскости экрана и в результате получится слишком явно выраженный 3D-эффект. А чересчур большое значение будет означать, что край воображаемого 3D-пространства находится намного дальше, и получится менее выраженный 3D-эффект:
.flipper {
perspective: 400px;
position: relative;
}
Внешний элемент имеет относительное позиционирование, которое предназначено для того, чтобы создать содержимое для flipper-object, позиционируемое внутри него:
.flipper-object {
position: absolute;
transition: transform 1s;
transform-style: preserve-3d;
}
Кроме абсолютного позиционирования .flipper-object в левом верхнем углу его ближайшего родительского элемента с относительным позиционированием (что является позицией по умолчанию для абсолютно позиционированных элементов), у нас имеется установка перехода для преобразования. В данном случае ключевым объявлением, касающимся 3D-эффекта, является transform-style: preserve-3d. Тем самым браузеру сообщается, что при преобразовании этого элемента мы хотим, чтобы 3D-эффект сохранялся для всех дочерних элементов.
