Latest web development tutorials

CSS3 3D-преобразования

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

CSS3 позволяет использовать 3D для форматирования элемента преобразования.

В этой главе вы узнаете некоторые методы преобразования 3D:

  • rotateX ()
  • rotateY ()

Нажмите на следующие элементы, чтобы увидеть разницу между 2D и 3D преобразование между Conversion:

2D вращать
3D вращаются


Поддержка браузеров

Цифры в таблице представляют первый браузер для поддержки номер версии имущества.

Сразу же после цифровой -webkit-, -ms- или -moz- назад в поддержку префикса атрибута первый номер версии браузера.

属性
transform 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-origin
(three-value syntax)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-style 36.0
12.0 -webkit-
11.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective-origin 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
backface-visibility 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-

Метод rotateX ()

Поворот X

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

OperaSafariChromeFirefoxInternet Explorer

примеров

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

Попробуйте »


Метод rotateY ()

Поворот Y

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

OperaSafariChromeFirefoxInternet Explorer

примеров

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

Попробуйте »


свойство преобразования

В следующей таблице перечислены все свойства преобразования:

свойство описание CSS
преобразование Применительно к элементу 2D или 3D преобразование. 3
преобразовании происхождения Это позволяет изменять положение элемента, подлежащего преобразованию. 3
преобразование стиля Положение было то, как вложенные элементы отображаются в 3D-пространстве. 3
перспективный Положения 3D эффект перспективы элемент. 3
перспектива-происхождения Заданное положение в нижней части 3D-элемента. 3
противоположная сторона-видимость Определить элементы, когда он не в поверхности экрана видна. 3

Способ преобразования 3D

функция описание
matrix3d (п, п, п,п, п, п,
п, п, п, п,п, п, п, п, п, п)
3D преобразования определяется с использованием 16 значений 4x4 матрицы.
translate3d(х, у, г) Определено 3D преобразование.
translateX(х) Определить 3D преобразование, используя только значения для оси X.
translateY(у) Определить 3D преобразование, используя только значения оси ординат.
translateZ(г) Определить 3D преобразование, используя только значения для оси Z.
Scale3D(х, у, г) Определить 3D масштабное преобразование.
Scalex(х) масштабного преобразования 3D определяется заданным значением X-оси.
ScaleY(у) масштабного преобразования 3D определяется заданным значением Y-оси.
scaleZ(г) масштабного преобразования 3D определяется заданным значением Z оси.
Rotate3D (х, у, г,угол) Определить вращение 3D.
rotateX(угол) Определено вдоль оси вращения X 3D.
rotateY(угол) Определено вдоль оси вращения Y 3D.
rotateZ(угол) Определено вдоль оси вращения Z 3D.
перспектива(п) 3D вид в перспективе определения преобразовательного элемента.