HTML и CSS — языки, с помощью которых верстают страницы в интернете. Овладеть основами этих языков совсем нетрудно — это первый шаг к профессии веб-разработчика. Вначале вы узнаете, как работать со шрифтами и текстом, а в конце концов научитесь верстать несложные страницы с анимацией и без. Авторы курса — разработчики из Яндекса. У курса есть продолжение.
Преобразования в трёхмерном пространстве
Loading...
來自 Moscow Institute of Physics and Technology 的課程
Основы HTML и CSS
125 個評分
Moscow Institute of Physics and Technology
125 個評分
課程 2（共 5 門，Specialization Разработка интерфейсов: вёрстка и JavaScript）
從本節課中
Анимации в CSS
На пятой неделе вы узнаете про основные виды трансформаций и о том, как создать анимации только при помощи CSS. Разумеется, попрактикуетесь в создании анимаций разных уровней сложности.
與講師見面
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
Здравствуйте.
В этом видео я расскажу вам о преобразованиях в трехмерном пространстве.
Итак, для поворота по оси x используется функция rotateX.
В отличие от двухмерного пространства, где поворот происходил вокруг точки,
то в трехмерном пространстве поворот происходит вокруг прямой.
Функция rotateX позволяет поворачивать элемент вокруг оси x.
Функция rotateY позволяет поворачивать элемент вокруг оси y.
Ну и по аналогии функция rotateZ позволяет поворачивать элемент вокруг оси z.
В этом случае, если смотреть сверху, то возникает ощущение,
что поворот происходит вокруг точки.
Но на самом деле поворот происходит вокруг оси z.
По аналогии с двухмерным пространством в трехмерном пространстве существует
перемещение.
Для перемещения по оси x существует функция translateX.
Для перемещения по оси y существует функция translateY.
И добавляется ещё функция translateZ, которая перемещает по оси z.
В этом случае элемент перемещается как бы от и к зрителю.
Вот так это выглядит.
Функция scale осталась неизменной, то есть как для двухмерного пространства,
так и трехмерного пространства.
Потому что объекты в трехмерном пространстве плоские,
то есть они не имеют толщину, они имеют только ширину и высоту.
Предыдущие примеры не выглядели бы так красиво без такого понятия,
как перспектива.
Перспектива позволяет создавать иллюзию глубины,
то есть перемещать двухмерное пространство вдоль оси z.
То есть чем дальше от пользователя находится элемент, тем он меньше,
чем ближе, тем он больше.
То есть элемент уходит как бы вглубь экрана или из него.
Для того чтобы задать перспективу, нужно использовать свойство perspective.
Значение задаётся в пикселях.
Посмотрим несколько значений.
Итак, по умолчанию установлено значение none, и кажется, что объект плоский.
Если мы укажем значение, например, 200 пикселей,
то искажение объекта очень сильное, потому что глубина экрана не очень большая,
и дальняя часть всё сильнее стремится к точке.
Если мы указываем значение 400 пикселей,
то глубина экрана сильно больше, и искажений меньше.
Значение none говорит о том, что значение установлено в бесконечность,
поэтому кажется, что объект плоский.
Значение перспективы можно изобразить вот так схематически.
То есть значение перспективы — это расстояние от зрителя до плоскости,
на которую проецируется изображение объекта.
Чем больше это значение, тем дальше находится эта плоскость.
Чем ближе, тем ближе к зрителю эта плоскость.
Можно поэкспериментировать дома.
Если мы будем смотреть на стол издалека, то он нам будет казаться плоским,
если мы подойдём сильно ближе и посмотрим на стол, то мы увидим,
что дальняя граница всё сильнее сходится к точке, то есть искажение больше.
Также можно менять значение перспективы,
то есть как будто бы мы перемещаемся над объектом.
Мы можем перемещаться в левую сторону над объектом и в правую сторону,
также вверх и вниз.
Для того чтобы задать эту точку, задаётся свойство перспектив origin.
Значение считается из левой верхней точки.
По умолчанию значение установлено 50 % 50 %, то есть ровно посередине.
Также существуют ключевые слова, такие как right, top, left, bottom или center.
В браузере это будет выглядеть вот так.
То есть по умолчанию мы находимся посередине объекта,
если мы зададим значение 0 0, то зритель перемещается в левую верхнюю точку.
Если мы задаём значение 50 % 0 %, то есть мы находимся посередине над объектом.
Для того чтобы сообщить браузеру, что внутри элемента находятся другие элементы,
которые позиционируются в трехмерном пространстве,
нужно использовать свойство transform-style со значением preserve-3d.
По умолчанию значение установлено flat, то есть плоский.
Вот так выглядит объект, у которого не задано это свойство,
и все объекты внутри него плоские, то есть они не позиционируются
в трехмерном пространстве, хотя свойства им заданы.
И если мы устанавливаем это свойство родителю, то внутренние элементы начинают
позиционироваться относительно своего родителя уже в трехмерном пространстве.
Иногда возникает потребность скрыть заднюю сторону при вращении плоскости.
Для этого нужно воспользоваться свойством backface-visibility.
По умолчанию значение стоит visible, то есть когда вращается плоскость,
заднюю сторону видно.
Если задать значение hidden, то при повороте плоскости,
она становится полностью прозрачной.
В данном примере оба куба полупрозрачные.
Если мы добавим фон, то видно, что у правого куба, у которого задано
backface-visibility: hidden, задние стороны плоскостей не видно.
По аналогии с двухмерным пространством,
в трехмерном пространстве тоже есть аналогичные функции.
Например, translate, аналог в 3d — это translate3d.
В этом случае переход происходит по трём координатам x, y, z.
По аналогии с функцией scale есть функция scale3d.
Масштабирование происходит по вектору, вектор указывается точкой x, y, z.
Поворот в трёхмерном пространстве происходит не вокруг точки,
а вокруг прямой.
Чтобы задать эту прямую используется функция rotate3d,
где указываются координаты вектора и угол поворота.
Есть также функция matrix и matrix3d, о ней я расскажу чуть позже.
Итак, функция rotate3d.
Мы указываем вектор, в данном случае это точка (1, 1,
1), и поворот на 180 градусов.
То есть плоскость пронизывает этот вектор, как бы фиксируется,
и крутится этот вектор, тем самым поворачивая плоскость вокруг него.
Вот так это выглядит в трехмерном пространстве.
На самом деле все предыдущие преобразования, о которых я говорил,
основаны на матрице преобразований.
В CSS также можно указать матрицу преобразований, используя функцию matrix.
В этом случае матрица будет работать в двухмерном пространстве.
Ей передаётся шесть аргументов.
четыре из них — это a, b, c и d, а последние два — это смещение.
Итак, a обозначает масштабирование по x, b — наклон по x,
с — наклон по оси y, и d — масштабирование по y.
И значения tx и tx обозначают перемещения по оси x и по оси y.
Данная функция обычно используется при расчётах из javascript.
То есть каждый раз держать в голове и использовать для ручной вёрстки довольно
сложно.
Давайте попробуем изменить значение матрицы преобразований.
По умолчанию у a и d значения стоят единицы, у всех остальных — нули.
Теперь поставим значения a: 0, b: 1,
c: −1, d: 0, и добавим смещение по 10 пикселей.
И мы увидим, что элемент сместился и повернулся на 90 градусов.
При помощи матрицы преобразований можно сделать практически все
предыдущие преобразования, о которых я рассказывал.
В этом видео вы узнали о трёхмерных преобразованиях, и что такое перспектива,
и для чего она нужна.
В следующем видео я расскажу вам о том,
как анимировать переходы от одного значения свойств к другому.
