Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS3 3D Трансформации


« Назад Далее »

Трехмерные Трансформации

CSS3 позволяет вам форматировать ваши элементы, используя трехмерные трансформации.

В этом уроке вы узнаете о некоторых методах 3D трансформации:

  • rotateX()
  • rotateY()

Кликните на элементах ниже, чтобы увидеть разницу между 2D трансформацией и 3D трансформацией:

2D поворот
3D поворот


Поддержка Браузерами

Свойство Поддержка Браузерами
transform

Internet Explorer, Firefox и Opera пока еще не поддерживают методы трехмерного трансформирования.

Chrome и Safari требуют приставки -webkit-.


Метод rotateX()

Поворот X

С помощью метода rotateX() элемент поворачивается вокруг своей оси X на заданный угол.

Opera Safari Chrome Firefox Internet Explorer

Пример

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari и Chrome */
}

Попробуйте сами »


Метод rotateY()

Поворот Y

Посредством метода rotateY() элемент поворачивается вокруг своей оси Y на заданный угол.

Opera Safari Chrome Firefox Internet Explorer

Пример

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari и Chrome */
}

Попробуйте сами »


Свойства Трансформации

Следующая таблица перечисляет все свойства трансформации:

Свойство Описание CSS
transform Применяет двухмерную или трехмерную трансформацию к элементу 3
transform-origin Позволяет вам изменить положение трансформированных элементов 3
transform-style Указывает, как вложенные элементы отрисовываются в трехмерном пространстве 3
perspective Указывает перспективу, откуда просматриваются трехмерные элементы 3
perspective-origin Указывает нижнюю позицию трехмерных элементов 3
backface-visibility Определяет, должен ли элемент быть видимым, когда он развернут относительно плоскости экрана 3

Методы Трехмерной Трансформации

Функция Описание
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Определяет трехмерную трансформацию, используя матрицу 4x4 из 16 значений
translate3d(x,y,z) Определяет трехмерный перенос
translateX(x) Определяет трехмерный перенос, ипользуя только значение для оси X
translateY(y) Определяет трехмерный перенос, ипользуя только значение для оси Y
translateZ(z) Определяет трехмерный перенос, ипользуя только значение для оси Z
scale3d(x,y,z) Определяет трехмерную трансформацию масштабирования
scaleX(x) Определяет трехмерную трансформацию масштабирования с заданием параметра для оси X
scaleY(y) Определяет трехмерную трансформацию масштабирования с заданием параметра для оси Y
scaleZ(z) Определяет трехмерную трансформацию масштабирования с заданием параметра для оси Z
rotate3d(x,y,z,angle) Определяет трехмерный поворот
rotateX(угол) Определяет трехмерный поворот вдоль оси X
rotateY(угол) Определяет трехмерный поворот вдоль оси Y
rotateZ(угол) Определяет трехмерный поворот вдоль оси Z
perspective(n) Определяет перспективный вид для трехмерно-трансформированного элемента





« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru