Articles
Введение в CSS
CSS-свойства, связанные с 3D-анимацией

CSS-свойства, связанные с 3D-анимацией

В этой статье объясняются CSS-свойства, связанные с 3D-анимациями.

Мы расскажем, как работают 3D-анимации в CSS и как их использовать с реальными примерами кода. Вы на практике узнаете, как применять 3D-преобразования с помощью свойства transform, а также добавлять глубину и трёхмерный эффект с помощью свойств perspective и transform-style.

YouTube Video

HTML для предварительного просмотра

css-animation-3d.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS 3D Animation</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-animation-3d.css">
  9</head>
 10<body>
 11    <header>
 12        <h1>CSS Properties For 3D Animation</h1>
 13    </header>
 14    <main>
 15        <header>
 16            <h2>3D Animation Related Properties</h2>
 17        </header>
 18
 19        <!-- 3D Keyframes Section -->
 20        <article>
 21            <h3>@keyframes with 3D Effects</h3>
 22            <section>
 23                <header><h4>animation: rotateY3D 4s linear infinite</h4></header>
 24                <section class="sample-view">
 25                    <section class="sample-view-3d">
 26                        <div class="box-animation-rotateY">Rotate Y</div>
 27                    </section>
 28                </section>
 29                <header><h4>animation: rotateX3D 4s linear infinite</h4></header>
 30                <section class="sample-view">
 31                    <section class="sample-view-3d">
 32                        <div class="box-animation-rotateX">Rotate X</div>
 33                    </section>
 34                </section>
 35                <header><h4>animation: cube-spin 6s ease-in-out infinite</h4></header>
 36                <section class="sample-view">
 37                    <section class="sample-view-3d">
 38                        <div class="box-animation-cube">Spinning Cube</div>
 39                    </section>
 40                </section>
 41            </section>
 42        </article>
 43
 44        <article>
 45            <h3>Hover to Flip the Card</h3>
 46            <section>
 47                <header><h4>HTML</h4></header>
 48<pre>
 49&lt;div class=&quot;card-container&quot;&gt;
 50    &lt;div class=&quot;card&quot;&gt;
 51        &lt;div class=&quot;card-face card-front&quot;&gt;
 52        &lt;h3&gt;Front&lt;/h3&gt;
 53        &lt;p&gt;This is the front side&lt;/p&gt;
 54        &lt;/div&gt;
 55        &lt;div class=&quot;card-face card-back&quot;&gt;
 56        &lt;h3&gt;Back&lt;/h3&gt;
 57        &lt;p&gt;This is the back side&lt;/p&gt;
 58        &lt;/div&gt;
 59    &lt;/div&gt;
 60&lt;/div&gt;
 61</pre>
 62            </section>
 63            <section class="sample-view" style="height: 270px;">
 64                <section class="sample-view-3d-card">
 65                    <div class="card-container">
 66                        <div class="card">
 67                            <div class="card-face card-front">
 68                            <h3>Front</h3>
 69                            <p>This is the front side</p>
 70                            </div>
 71                            <div class="card-face card-back">
 72                            <h3>Back</h3>
 73                            <p>This is the back side</p>
 74                            </div>
 75                        </div>
 76                    </div>
 77                </section>
 78            </section>
 79        </article>
 80
 81        <article>
 82            <h3>3D Animation Cube Example</h3>
 83            <section>
 84                <header><h4>animation: cube-spin 6s ease-in-out infinite</h4></header>
 85                <section class="sample-view" style="height: 300px;">
 86                    <div class="scene">
 87                        <div class="cube">
 88                            <div class="face front">Front</div>
 89                            <div class="face back">Back</div>
 90                            <div class="face left">Left</div>
 91                            <div class="face right">Right</div>
 92                            <div class="face top">Top</div>
 93                            <div class="face bottom">Bottom</div>
 94                        </div>
 95                    </div>
 96                </section>
 97            </section>
 98        </article>
 99    </main>
100</body>
101</html>

3D-анимации и переходы

Современные веб-браузеры позволяют создавать трёхмерные 3D-анимации, используя только CSS. Поскольку вы можете создавать лёгкие и привлекательные взаимодействия без использования JavaScript, это способствует улучшению UI/UX.

Как работает 3D-анимация

CSS 3D-анимации в основном используют следующие свойства:.

  • Свойство transform изменяет позицию, вращение и масштаб элементов.
  • Свойство perspective задаёт расстояние до точки обзора для создания эффекта 3D-глубины.
  • Свойство transform-style определяет, должны ли дочерние элементы преобразовываться в 3D-пространстве.
  • Свойство backface-visibility управляет видимостью обратной стороны элементов.
  • Свойства animation и transition используются для создания анимаций.

@keyframes и 3D-анимации

Вращение вокруг оси Y

Начнём с определения 3D-анимации, которая вращает элемент вокруг оси Y с помощью @keyframes.

 1.sample-view-3d {
 2    width: 100px;
 3    height: 100px;
 4    margin: 1rem auto;
 5    perspective: 800px;
 6}
 7
 8.box-animation-rotateY,
 9.box-animation-rotateX,
10.box-animation-cube {
11    width: 100%;
12    height: 100%;
13    background: linear-gradient(45deg, #4facfe, #00f2fe);
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    color: white;
18    font-size: 1.1rem;
19    border-radius: 10px;
20    transform-style: preserve-3d;
21}
22
23/* RotateY animation */
24@keyframes rotateY3D {
25    from { transform: rotateY(0deg); }
26    to { transform: rotateY(360deg); }
27}
28
29.box-animation-rotateY {
30    animation: rotateY3D 4s linear infinite;
31}
  • Анимация rotateY3D вращает элемент на 360 градусов вокруг оси Y.
  • Свойство transform-style установлено в значение preserve-3d, чтобы сохранять 3D-преобразования дочерних элементов.
  • Свойство perspective устанавливает расстояние до точки обзора для регулировки глубины. Здесь установлено значение 800px.

Вращение вокруг оси X

Также определим 3D-анимацию, которая вращает элемент вокруг оси X.

1/* RotateX animation */
2@keyframes rotateX3D {
3    from { transform: rotateX(0deg); }
4    to { transform: rotateX(360deg); }
5}
6
7.box-animation-rotateX {
8    animation: rotateX3D 4s linear infinite;
9}
  • Анимация rotateX3D вращает элемент на 360 градусов вокруг оси X.

Вращение вокруг обеих осей X и Y

Давайте определим 3D-анимацию, которая сочетает вращения вокруг обеих осей X и Y.

 1/* Cube spin (combination of X and Y rotation) */
 2@keyframes cube-spin {
 3    0%   { transform: rotateX(0deg) rotateY(0deg); }
 4    50%  { transform: rotateX(180deg) rotateY(180deg); }
 5    100% { transform: rotateX(360deg) rotateY(360deg); }
 6}
 7
 8.box-animation-cube {
 9    animation: cube-spin 6s ease-in-out infinite;
10}
  • Вращение вокруг нескольких осей создаёт более выраженный 3D-эффект.

Переворачивание лицевой и обратной сторон 3D-карточки

Определим эффект анимации при наведении, который переворачивает лицевую и обратную стороны 3D-карточки.

 1/* 3D perspective wrapper */
 2.sample-view-3d-card {
 3  perspective: 1000px;
 4  width: 300px;
 5  height: 200px;
 6  margin: 2rem auto;
 7}
 8
 9/* Outer card container */
10.card-container {
11  width: 100%;
12  height: 100%;
13  position: relative;
14  perspective: 1000px;
15}
16
17/* The card itself */
18.card {
19  width: 100%;
20  height: 100%;
21  position: relative;
22  transform-style: preserve-3d;
23  transition: transform 0.8s ease;
24}
25
26/* Both faces */
27.card-face {
28  position: absolute;
29  width: 100%;
30  height: 100%;
31  backface-visibility: hidden;
32  border-radius: 12px;
33  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
34  display: flex;
35  flex-direction: column;
36  justify-content: center;
37  align-items: center;
38  font-family: sans-serif;
39  color: white;
40  font-size: 1.1rem;
41  padding: 1rem;
42}
43
44/* Flip the card on hover */
45.card-container:hover .card {
46  transform: rotateY(180deg);
47}
48
49/* Front side style */
50.card-front {
51  background: linear-gradient(135deg, #00c9ff, #92fe9d);
52}
53
54/* Back side style */
55.card-back {
56  background: linear-gradient(135deg, #fc466b, #3f5efb);
57  transform: rotateY(180deg);
58}
  • Если установить свойство backface-visibility в значение hidden, обратная сторона не будет отображаться на переднем плане.
  • Применение rotateY(180deg) к классу .card-back создаёт обратную сторону карточки.
  • Применение rotateY(180deg) при наведении переворачивает карточку.

3D-анимация куба

Определим 3D-анимацию для куба. При вращении каждая грань куба становится видимой, демонстрируя 3D-эффект с помощью наведения или автоматической анимации.

 1.scene {
 2  width: 200px;
 3  height: 200px;
 4  perspective: 800px; /* Viewing distance (the smaller the value, the stronger the depth effect) */
 5  background-color: rgba(255, 255, 255, 0);
 6  border: 0;
 7}
 8
 9.cube {
10  width: 100%;
11  height: 100%;
12  transform-style: preserve-3d;
13  transform: rotateX(0deg) rotateY(0deg);
14  animation: rotateCube 10s infinite linear;
15  position: relative;
16  background-color: rgba(255, 255, 255, 0);
17  border: 0;
18}
19
20.face {
21  position: absolute;
22  width: 200px;
23  height: 200px;
24  background: rgba(0, 128, 255, 0.6);
25  border: 1px solid #fff;
26  display: flex;
27  align-items: center;
28  justify-content: center;
29  font-size: 24px;
30  font-weight: bold;
31}
32
33/* Positioning each face */
34.front  { transform: translateZ(100px); }
35.back   { transform: rotateY(180deg) translateZ(100px); }
36.left   { transform: rotateY(-90deg) translateZ(100px); }
37.right  { transform: rotateY(90deg) translateZ(100px); }
38.top    { transform: rotateX(90deg) translateZ(100px); }
39.bottom { transform: rotateX(-90deg) translateZ(100px); }
40
41/* Rotation animation */
42@keyframes rotateCube {
43  from {
44    transform: rotateX(0deg) rotateY(0deg);
45  }
46  to {
47    transform: rotateX(360deg) rotateY(360deg);
48  }
49}
  • Класс .cube отображается в 3D, потому что его свойство transform-style установлено в значение preserve-3d.
  • Каждая грань куба выносится вперёд от центра куба с помощью translateZ(100px), формируя 3D-куб.
  • Анимация rotateCube автоматически вращает куб, сочетая вращения по осям Y и X.

Точка обзора изменяется с помощью perspective

Уменьшение значения perspective приближает точку обзора к элементу, усиливая глубину и подчёркивая 3D-эффект. Наоборот, увеличение значения отдаляет точку обзора, результатом чего становится более естественный и мягкий 3D-вид. Здесь давайте изменим свойство perspective с 800px на 200px, чтобы показать 3D-анимацию куба.

1.scene {
2  perspective: 200px;
3}
  • Изменив свойство perspective с 800px на 200px, точка обзора приблизится, и глубина станет более выраженной.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

CSS свойства, связанные с анимацией