Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

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


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() Метод

Поворот X

rotateX() метод вращает элемент вокруг его оси Х при заданной степени:

пример

div {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg);
}
Попробуй сам "

rotateY() Метод

Поворот Y

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 трансформированного элемента