3D-эффект переворачивание карточки | Подпишись на канал!

Функции 3D-трансформации в CSS

Добавьте еще одно измерение к веб-страницам с помощью новых функций 3D-преобразования в CSS. Разберемся с масштабированием, вращением, перспективой, а также проблемами z-index и подводными камнями браузеров.

HTML-элементы могут быть трансформированы в трех направлениях:

Считается, что поверхность экрана — это начало Z-оси. Объекты с положительными Z-координатами будут выдвигаться ближе к пользователю, а с отрицательными — перемещаться вдаль. При добавлении перспективы слой с большим отрицательным Z-значением может полностью пропасть.

Следует отметить несколько моментов:

1. CSS может только преобразовать двумерные элементы HTML в трехмерном пространстве. Сами элементы остаются плоскими и имеют нулевую глубину. Масштабирование в z-плоскости не сделает из квадрата куб. В принципе, вы можете создать полноценный куб, но для этого потребуется шесть элементов: по одному для каждой стороны.
2. 3D-преобразования отлично подходят для создания эффектов страницы, но вряд ли позволят создать следующий MineCraft или Call of Duty. Сложные модели лучше реализовать с использованием WebGL.

3D преобразования хорошо поддерживаются во всех современных браузерах (включая IE10+) с некоторыми исключениями:

• Internet Explorer не поддерживает transform-style: preserve-3d , что делает невозможным создание 3D сцен.
• Все версии Safari должны использовать префикс -webkit-backface-visibility для скрытия задних граней. Все остальные браузеры поддерживают свойство backface-visibility .

На примере вы можете увидеть, как работают CSS-трансформации, которые будут разобраны ниже:

transform

К любому элементу можно применить свойство transform . Оно принимает функцию с одним или несколькими параметрами. Например:

Если требуется две или более трансформаций, можно указать несколько функций, разделенных пробелами:

Например, горизонтальное масштабирование и вертикальный сдвиг:

Правило transform: none отменяет все существующие трансформации.

Функции сдвига

С помощью translate -функций можно переместить элемент по горизонтали или по вертикали вдоль осей X и Y:

transform: translateX(50px); /* 50px вправо */ transform: translateY(-100%); /* 100% вверх */ transform: translate(50px, -100%); /* одновременно */

Можно использовать любые единицы измерения расстояния. Проценты будут отсчитываться от размеров самого элемента, таким образом, блок с высотой 100px функция при использовании translateY(80%) будет сдвинут на 80px.

Для сдвига в третьем направлении существует translateZ :

transform: translateZ(-200px); /* 200px вглубь экрана */

Возьмем три элемента – #box1 , #box2 и #box3 – и спозиционируем их абсолютно в одной точке. К #box применим translateZ(-200px) , а к #box3 – translate(-400px) . Результат довольно скучный:

Повернем весь родительский контейнер #scene по z-оси, чтобы понять, что происходит:

Функция translate3d позволяет сдвинуть элемент по всем трем осям одновременно:

transform: translate3d(50px, 100%, 7em);

transform-style

По умолчанию (и всегда в IE), свойство transform-style имеет значение flat . Это означает, что все преобразованные дочерние элементы контейнера лежат в плоскости самого элемента. Другими словами, какую бы трансформацию вы не назначили, она не выйдет за двумерные рамки родителя.

В большинстве случаев transform-style: preserve-3d; указывает, что дочерние элементы блока позиционируются в 3D-пространстве и все трансформации контейнера должны этому соответствовать.

Вращение

2D-функция rotate() поворачивает элементы вокруг Z-оси и идентична rotateZ() . Для примера:

transform: rotateZ(45deg); /* аналогичный эффект rotate(45deg) */

rotateX() управляет вращением вокруг горизонтальной оси, а rotateY() – вокруг вертикальной.

Угол вращения может быть определен несколькими способами:

• turn : например, 0.5turn – это половина оборота по часовой стрелке;
• deg (градусы): 90deg – четверть оборота по часовой стрелке;
• rad (радианы): -3.1416rad – половина оборота против часовой стрелки;
• grad (градианы): один полный оборот равен 400grad , таким образом, -200grad – это четверть оборота против часовой стрелки;

Три оси вращения могут быть установлены функцией rotate3d() . Немного путает то, что она принимает четыре параметра для определения вектора вращения:

• x – x-координата вектора, обозначающая ось вращения (0 или 1).
• y – y-координата вектора, обозначающая ось вращения (0 или 1).
• z – z-координата вектора, обозначающая ось вращения (0 или 1).
• a – угол вращения. Положительное значение определяет поворот по часовой стрелке, а отрицательное – против.

Любители математики мазохисты могут ознакомиться с детальной документацией свойства rotate3d на MDN.

Масштабирование

Функции scaleX() и scaleY растягивают или сжимают элемент по горизонтали или по вертикали соответственно.

transform: scaleX(2); /* ширина в 2 раза больше */ transform: scaleY(0.5); /* высота в 2 раза меньше */

scaleZ() делает то же самое, но в глубину. В самом первом примере установка свойства transform: scaleZ(0.5) уменьшит расстояние между квадратами в два раза.

Функция scale3d(x, y, z) позволяет масштабировать сразу во всех направлениях:

Центр трансформаций

По умолчанию элемент вращается и масштабируется относительно его центральной точки. Это поведение можно изменить, установив свойство transform-origin с одним, двумя или тремя разделенными пробелами значениями:

• одно значение: смещение по x-оси. Может быть указано в единицах расстояния или процентах. Также можно использовать ключевые слова left , center , right , top или bottom . Тут top и bottom устанавливают y-смещение, а x при этом остается в центре.
• два значения: смещение по x и y.
• три значения: смещение по x, y и z. Для последнего можно использовать только единицы длины (px, em).

Перемещение координаты по одной оси влияет на плоскости вращения по другим. Например, transform-origin: left center 0 ; перемещает начало координат в центр левой грани. Это повлияет на функции rotateY() и rotateZ() .

Видимость задних граней

Задняя часть элемента отображается, когда он вращается вокруг оси x или y более чем на 90, но менее чем на 270 градусов в любом направлении. Задняя часть зеркально повторяет переднюю, и по умолчанию она видна (значение visible ).

Ее можно скрыть, установив backface-visibility: hidden; :

backface-visibility: hidden; часто используется для анимации переворачивания карты, где два элемента обозначают переднюю и заднюю часть карты, но только один может быть виден в текущий момент.

Перспектива

Примеры, разобранные выше, не используют перспективу. Элемент, перемещенный глубже в плоскости z, остается того же размера, независимо от того, как далеко он находится от пользователя. По умолчанию свойство perspective равно none , но может иметь любое положительное значение. Например:

Чем меньше длина перспективы, тем ближе точка схода и тем более выражен 3D-эффект:

Точка схода

По умолчанию точка схода перспективы находится в центре трансформируемого элемента. Его можно изменить, установив perspective-origin: x y; , где:

x – ключевое слово ( left , center , right ) или процент от ширины элемента (значения 0%, 50% и 100% эквивалентны ключевым словам).
y – ключевое слово ( top , center , bottom ) или процент от высоты элемента (значения 0%, 50% и 100% эквивалентны ключевым словам).

Точка схода в верхнем левом углу:

Точка схода в нижнем правом углу:

Кроме того, существует функция perspective() – например, transform: perspective(200px) . Однако, она, кажется, не учитывает perspective-origin .

Все вместе

Масштабирование, вращение и сдвиг могут быть определены в одной функции matrix3d() , которая требует не менее 16 значений для трехмерного аффинного преобразования.

Ее лучше всего использовать в JavaScript и только тем, кто хорошо разбирается в геометрии! В CSS удобнее и проще использовать простые функции преобразования.

Полезные ссылки

CSS-трансформации позволяют упростить манипуляции с объектам в трех измерениях. В интернете много потрясающих примеров 3D-преобразований, включая виртуальную реальность, шутеры от первого лица, галереи изображений и скользящий текст из Star Wars. Не все они могут использоваться в реальных проектах. Тем не менее, несколько изящных и плавных 3D-эффектов добавят на ваши страницы новое измерение реальности.

Источник

rotate3d()

Функция CSS rotate3d() трансформирует элемент без деформации, вращая его в трёхмерном пространстве вокруг зафиксированной оси. Её результатом является тип .

Интерактивный пример

In 3D space, rotations have three degrees of liberty, which together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the transform-origin (en-US) property). If, as specified, the vector is not normalized (i.e., if the sum of the square of its three coordinates is not 1), the user agent will normalize it internally. A non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole CSS property.

Примечание: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.

Syntax

Values

Cartesian coordinates on ℝ 2	This transformation applies to the 3D space and can’t be represented on the plane.
Homogeneous coordinates on ℝℙ 2
Cartesian coordinates on ℝ 3	1 + (1 — cos( a ))( x 2 — 1) z · sin( a )+ x y (1 — cos( a )) — y · sin( a ) + x z · (1 — cos( a )) — z · sin( a ) + x y · (1 — cos( a )) 1+(1-cos(a))(y2-1) x · sin( a ) + y z · (1 — cos( a )) ysin(a) + xz(1-cos(a)) -xsin(a)+yz(1-cos(a)) 1+(1-cos(a))(z2-1) t 0 0 0 1
Homogeneous coordinates on ℝℙ 3

Examples

Rotating on the y-axis

HTML

div>Normaldiv> div class="rotated">Rotateddiv> 

CSS

body  perspective: 800px; > div  width: 80px; height: 80px; background-color: skyblue; > .rotated  transform: rotate3d(0, 1, 0, 60deg); background-color: pink; > 

Result

Rotating on a custom axis

HTML

div>Normaldiv> div class="rotated">Rotateddiv> 

CSS

body  perspective: 800px; > div  width: 80px; height: 80px; background-color: skyblue; > .rotated  transform: rotate3d(1, 2, -1, 192deg); background-color: pink; > 

Источник

3D-эффект переворачивания карточки на HTML и CSS

Всем привет. В этом посте я расскажу как сделать крутую 3D-анимацию переворота карточки при наведении. Использоваться будет только HTML и CSS.

index.html

         
 
Aniskovich Anton
 Подпишись на канал! и ставьте