CSS3 3D Трансформации
CSS3 позволяет форматировать элементы с помощью 3D-преобразования.
Наведите курсор мыши на указанные ниже элементы, чтобы увидеть разницу между 2D и 3D-преобразования:
2D вращать
3D вращаются
Поддержка браузеров для 3D-преобразования
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
Числа следуют -webkit-, -moz- или -o- указать первую версию , которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| 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- |
CSS3 3D Трансформации
В этой главе вы узнаете о следующих 3D методов преобразования:
-
rotateX() -
rotateY() -
rotateZ()
rotateX() Метод
rotateX() метод вращает элемент вокруг его оси Х при заданной степени:
пример
div
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
Попробуй сам " rotateY() Метод
rotateY() метод вращает элемент вокруг его оси Y. при заданной степени:
пример
div
{
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
Попробуй сам " rotateZ() Метод
rotateZ() метод вращает элемент вокруг его оси Z. при заданной степени:
пример
div
{
-webkit-transform: rotateZ(90deg); /* Safari */
transform: rotateZ(90deg);
}
Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 »
CSS3 Transform Properties
В следующей таблице перечислены все 3D преобразования свойства:
| Имущество | Описание |
|---|---|
| transform | Применяет 2D или 3D трансформацию к элементу |
| transform-origin | Позволяет изменить положение на трансформированных элементов |
| transform-style | Указывает, как вложенные элементы отображаются в 3D-пространстве |
| perspective | Указывает перспективу, как 3D-элементы просматриваются |
| perspective-origin | Определяет нижнюю позицию 3D-элементов |
| backface-visibility | Определяет, должен ли элемент быть видимым, когда не перед экраном |
3D Transform методы
| функция | Описание |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Определяет 3D преобразование, используя матрицу 4x4 из 16 значений |
| translate3d(x,y,z) | Определяет 3D перевод |
| translateX(x) | Определяет 3D перевода, используя только значение для оси Х |
| translateY(y) | Определяет 3D перевода, используя только значение для оси Y. |
| translateZ(z) | Определяет 3D перевод, используя только значение для оси Z. |
| scale3d(x,y,z) | Определяет масштабное преобразование 3D |
| scaleX(x) | Определяет масштабное преобразование 3D, давая значение для оси Х |
| scaleY(y) | Определяет масштабное преобразование 3D, давая значение для оси Y. |
| scaleZ(z) | Определяет масштабное преобразование 3D, давая значение для Z-оси |
| rotate3d(x,y,z,angle) | Определяет вращение 3D |
| rotateX(angle) | Определяет 3D поворот вдоль оси Х |
| rotateY(angle) | Определяет 3D поворот вдоль оси Y. |
| rotateZ(angle) | Определяет 3D поворот вдоль оси Z. |
| perspective(n) | Определяет перспективный вид для 3D трансформированного элемента |