Трехмерные преобразования CSS3 в Internet Explorer 10


Функции CSS3 позволяют сделать опыт работы с веб-ресурсами более разнообразным и увлекательным. В недавней статье мы рассказали, как веб-разработчики используют переходы и анимацию CSS3, чтобы добавить новое измерениена свой сайт и таким образом улучшить его. Трехмерные преобразования с помощью CSS3 позволяют разработчикам пользоваться еще одним измерением (буквально) для расширения возможностей сайтов. Например, в Windows 8 на странице «Пуск», созданной в стиле Metro, используются едва различимые трехмерные преобразования для отображения нажатых значков, как показано в примере ниже.

Показан значок Internet Explorer 10, не нажатый (слева) и нажатый (справа)
Показан значок Internet Explorer 10, не нажатый (слева) и нажатый (справа)

Добавление 3-го измерения в преобразования CSS

Подобно двухмерным преобразованиям CSS3, трехмерные преобразования обеспечивают функции и значения для свойств transform и transform-origin CSS, применяющих операции геометрического преобразования к элементам HTML. Трехмерные преобразования CSS выводят возможности преобразований на трехмерный уровень. Функции преобразования rotate(), scale(), translate(), skew() и matrix() применяются, чтобы охватить трехмерное пространство с помощью такого параметра, как координата Z, а в случае matrix3d() — с помощью еще 10 параметров, а также дополнительных функций преобразования, например rotateZ() и scaleZ().

Новая функция преобразования perspective придает элементам объемность за счет того, что более дальние точки выглядят меньше.

Трехмерные преобразования CSS3 добавляют и некоторые новые свойства CSS. В дополнение к свойствам transform и transform-origin, Internet Explorer 10 поддерживает свойства perspective, perspective-origin, backface-visibility и значение flat свойства transform-style (префиксы заданы поставщиком).

Примечание. Во всех примерах разметки в этой статье используются свойства без префиксов, что определено стандартом W3C. Однако на этот раз все браузеры, в которых реализованы эти свойства, имеют префиксы, определенные поставщиками. Когда станете экспериментировать, не забудьте добавить префикс своего браузера к разметке примера.

Построение перспективы

Функция преобразования perspective важна для трехмерных преобразований. Она задает расположение смотрящего и размещает просматриваемое содержимое на пирамиде просмотра, которая в итоге проецируется на двухмерную плоскость. Если перспектива не задана, все точки в пространстве Z переносятся на ту же двухмерную плоскость, и в итоге преобразование не создает ощущения объемности. Для некоторых преобразований, таких как перенос вдоль оси Z (на рисунке ниже), функция преобразования перспективы очень важна для различения любых эффектов преобразований.

На примерах ниже  является исходным, непреобразованным элементом, а  — преобразованный элемент.

Пример преобразования: perspective(500px) translate(0px, 0px, -300px);   Пример преобразования: translate(0px, 0px, -300px);
transform: perspective(500px) translate(0px, 0px, -300px);   transform: translate(0px, 0px, -300px);
 
transform: perspective(500px) rotateY(30deg);   Пример преобразования: rotateY(30deg);
transform: perspective(500px) rotateY(30deg);   transform: rotateY(30deg);

Можно быстро применять преобразование с перспективой к нескольким элементам, используя свойство perspective в их родительских элементах. Свойство perspective применяет преобразование с перспективой к каждому из дочерних элементов:

Пример с двумя элементами div, преобразованными одним и тем же родительским свойством перспективы.

#parent {

perspective: 500px;

}

 

#div1 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg);

}

 

#div2 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg) translate(220px);

}

Свойство perspective-origin может использоваться также в сочетании с perspective для смещения точки наблюдения от центра элемента:

Иллюстрация свойства «перспектива-глубина».

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

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

#parent {

perspective: 500px;

perspective-origin: -300px 0px;

}


Свойство backface-visibility

Свойство backface-visibility применяется для скрытия тыльной стороны содержимого. По умолчанию тыльная сторона является видимой и преобразуемое содержимое можно видеть, даже когда оно повернуто. Но если для свойства backface-visibility задано значение hidden, содержимое скрыто, когда элемент вращается так, что лицевую сторону больше не видно. Это может пригодиться, если требуется имитировать объект с несколькими сторонами, такой как карта в примере ниже. Задавая для свойства backface-visibility значение hidden, можно легко сделать видимыми только лицевые стороны.

Разметка CSS:

.card, .card div {

position: absolute;

width: 102px;

height: 143px;

}

 

.card div:nth-child(1) {

background-image: url('redback.png');

}

 

.card div:nth-child(2) {

background-image: url('8clubs.png');

backface-visibility: hidden;

}

Разметка HTML для одной карты:

<div class="card"><div></div><div></div></div>

Создавая шесть карт, как определено выше, и придавая каждой из них свойство style="transform: rotateY(ndeg)" с различным значением вращения n, получаем в итоге:

Последовательность из 6 карт, переворачивающихся с лицевой стороны на тыльную.
вращениеY(0градусов); вращениеY(36градусов); вращениеY(72градуса); вращениеY(108градусов); вращениеY(144градуса); вращениеY(180градусов);

В примере, если нет вращения, мы видим второй div, карта восьмерка треф, поскольку она лежит первой в колоде. После применения к карте вращения на 90 градусов и более, свойство backface-visibility: hidden; второго div сначала сделает ее невидимой, а затем отобразит первый div, тыльную сторону карты.

Трехмерные преобразования с анимацией и переходами

Особо радует, что трехмерные преобразования можно использовать даже в сочетании с анимацией и переходами CSS. Если вы используете Internet Explorer 10 или другой браузер с поддержкой анимации CSS3 или трехмерных преобразований CSS3, изучите этот пример прокрутки текста, созданный с помощью анимации и свойства transform.

Здесь приведена разметка CSS, в которой достигнут эффект, проиллюстрированный на снимке экрана ниже.

#parentDiv {

perspective: 500px;

perspective-origin: 150px 500px;

}

 

#div1 {

transform-origin: 150px 500px;

animation: scrollText 200s linear infinite;

}

 

@keyframes scrollText {

0% { transform: rotateX(45deg) translateY(500px); }

100% { transform: rotateX(45deg) translateY(-8300px); }

}

Один из первых кадров ролика с анимацией и трехмерным преобразованием прокрутки текста.Один из последующих кадров ролика с анимацией и трехмерным преобразованием прокрутки текста.

Скорее пробуйте!

Опробуйте эти приемы сами в Internet Explorer 10 новой версии Windows Developer Preview. Тестовая интерактивная демонстрация Hands On: 3D Transforms поможет вам увидеть все доступные возможности трехмерных преобразований CSS.

Будем рады познакомиться с вашими достижениями и находками!

— Дженнифер Ю (Jennifer Yu), руководитель программы, графика в Internet Explorer

Skip to main content