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 ()
Метод rotateX (), элементы которого вокруг заданного числа степеней вращения в X-оси.
примеров
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
Попробуйте »
Метод rotateY ()
Метод rotateY (), элементы которого вокруг заданного числа степеней вращения в Y-оси.
примеров
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
{
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 вид в перспективе определения преобразовательного элемента. |