|
CSS3 3D Трансформации
Трехмерные Трансформации
CSS3 позволяет вам форматировать ваши элементы, используя трехмерные трансформации.
В этом уроке вы узнаете о некоторых методах 3D трансформации:
Кликните на элементах ниже, чтобы увидеть разницу между 2D трансформацией и 3D
трансформацией:
Поддержка Браузерами
Свойство |
Поддержка Браузерами |
transform |
|
|
|
|
|
Internet Explorer, Firefox и Opera пока еще не поддерживают методы трехмерного трансформирования.
Chrome и Safari требуют приставки -webkit-.
Метод rotateX()
С помощью метода rotateX() элемент поворачивается вокруг своей оси X на заданный угол.
Пример
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari и Chrome */
}
|
Попробуйте сами » |
Метод rotateY()
Посредством метода rotateY() элемент поворачивается вокруг своей оси Y на заданный угол.
Пример
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) |
Определяет перспективный вид для трехмерно-трансформированного элемента |
|
|