perspective — CSS | MDN

Experimental

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Свойство CSS perspective определяет расcтояние между плоскостью z = 0 и пользователем для того чтобы придать 3D-позиционируемому элементу эффект переспективы. Каждый трансформируемый элемент с z > 0 станет больше, с z < 0 соответственно меньше.

Элементы части которые находятся за пользователем, т.е. z-координата этих элементов больше чем значение  свойства perspective, не отрисовываются.

Точка схождения по умолчанию расположена в центре элемента, но её можно переместить используя свойство 

При использовании данного свойства со значениями отличными от 0 или none создаётся новый stacking context.

perspective: none;


perspective: 20px;
perspective: 3.5em;


perspective: inherit;
perspective: initial;
perspective: unset;

Значения

none

Указывает что трансформация перспективы к элементу применяться не будет.

<length>

<length> устанавливает растояние от пользователя до плоскости z = 0. Применяет трасформацию к элементу и его содержимому. Если значение отрицательно или равно 0, то преобразование не применяется.

Формальный синтаксис

Три куба

HTML Content

<table>
   <tbody>
      <tr>
         <th><code>perspective: 250px;</code>
         </th>
         <th><code>perspective: 350px;</code>
         </th>
         <th><code>perspective: 500px;</code>
         </th>
      </tr>
      <tr>
         <td>
            <div>
               <div>
                  <div>1</div>
                  <div>2</div>
                  <div>3</div>
                  <div>4</div>
                  <div>5</div>
                  <div>6</div>
               </div>
            </div>
         </td>
         <td>
            <div>
               <div>
                  <div>1</div>
                  <div>2</div>
                  <div>3</div>
                  <div>4</div>
                  <div>5</div>
                  <div>6</div>
               </div>
            </div>
         </td>
         <td>
            <div>
               <div>
                  <div>1</div>
                  <div>2</div>
                  <div>3</div>
                  <div>4</div>
                  <div>5</div>
                  <div>6</div>
               </div>
            </div>
         </td>
      </tr>
   </tbody>
</table> 
  

CSS Content

.pers250 {
    perspective: 250px;
    -webkit-perspective: 250px;
}
.pers350 {
    perspective: 350px;
    -webkit-perspective: 350px;
}
.pers500 {
    perspective: 500px;
    -webkit-perspective: 500px;
}


 .container {
   width: 200px;
   height: 200px;
   margin: 75px 0 0 75px;
   border: none;
}
.cube {
   width: 100%;
   height: 100%;
   backface-visibility: visible;
   perspective-origin: 150% 150%;
   transform-style: preserve-3d;
   -webkit-backface-visibility: visible;
   -webkit-perspective-origin: 150% 150%;
   -webkit-transform-style: preserve-3d;
}
.face {
   display: block;
   position: absolute;
   width: 100px;
   height: 100px;
   border: none;
   line-height: 100px;
   font-family: sans-serif;
   font-size: 60px;
   color: white;
   text-align: center;
}


 .front {
   background: rgba(0, 0, 0, 0.3);
   transform: translateZ(50px);
   -webkit-transform: translateZ(50px);
}
.back {
   background: rgba(0, 255, 0, 1);
   color: black;
   transform: rotateY(180deg) translateZ(50px);
   -webkit-transform: rotateY(180deg) translateZ(50px);
}
.right {
   background: rgba(196, 0, 0, 0.7);
   transform: rotateY(90deg) translateZ(50px);
   -webkit-transform: rotateY(90deg) translateZ(50px);
}
.left {
   background: rgba(0, 0, 196, 0.7);
   transform: rotateY(-90deg) translateZ(50px);
   -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.top {
   background: rgba(196, 196, 0, 0.7);
   transform: rotateX(90deg) translateZ(50px);
   -webkit-transform: rotateX(90deg) translateZ(50px)
}
.bottom {
   background: rgba(196, 0, 196, 0.7);
   transform: rotateX(-90deg) translateZ(50px);
   -webkit-transform: rotateX(-90deg) translateZ(50px);
}


th, p, td {
   background-color: #EEEEEE;
   padding: 10px;
   font-family: sans-serif;
   text-align: left;
}  

Результат

BCD tables only load in the browser

Свойство perspective | CSS справочник

Определение и применение

CSS свойство perspective определяет на сколько элемент удален от точки обзора. Свойство определяет перспективу обзора элемента, создавая для пользователя иллюзию глубины. Чем больше значение, указанное для перспективы, тем дальше от пользователя расположен элемент.

Главной особенностью свойства perspective является то, что значение перспективы устанавливается для вложенных (дочерних) элементов(находящихся под действием трехмерной трансформации), а не к самому элементу. Для установки перспективы для самого элемента используйте свойство transform со значением perspective(n).

Установить начало координат для свойства перспективы возможно при использовании свойства perspective-origin.

Поддержка браузерами

CSS синтаксис:

perspective:"length (число) | none | initial | inherit";

JavaScript синтаксис:

object.style.perspective = "500px"

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

Рассмотрим пример изменения перспективы вложенного (дочернего) элемента, используя CSS свойство perspective, HTML атрибута событий onchange и функции на JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>Перспектива элемента в CSS</title>
<style> 
#test1 {
width : 150px; /* устанавливаем ширину блока */
height : 150px; /* устанавливаем высоту блока */
margin : 20px 0 0 75px; /* устанавливаем величину внешнего отступа top-right-bottom-left */
border : 1px solid brown; /* устанавливаем сплошную границу размером 1px коричневого цвета */
background : wheat;  /* устанавливаем цвет заднего фона */
-moz-perspective : 80px;  /* для поддержки ранних версий браузеров */ 
-webkit-perspective : 80px;  /* для поддержки ранних версий браузеров */ 
perspective : 80px;  /* устанавливаем перспективу для дочернего элемента */ 
} 
 #test2 {
padding : 50px; /* устанавливаем величину внутреннего отступа для всех сторон */
border : 1px solid orange; /* устанавливаем сплошную границу размером 1px оранжевого цвета */
background : khaki;  /* устанавливаем цвет заднего фона */
transform : rotateX(45deg); /* двухмерное преобразование путем поворота элемента по часовой стрелке, используя только значение по оси x */
-webkit-transform : rotateX(45deg);  /* для поддержки ранних версий браузеров */ 
-moz-transform : rotateX(45deg);  /* для поддержки ранних версий браузеров */ 
-ms-transform : rotateX(45deg);  /* для поддержки ранних версий браузеров */ 
} 
</style>
<script> 
function changeP(value) {  /* создаем функцию для изменения значения стиля элемента с id = test1 (значение перспективы), с отображением результата изменения в элементе с id = info и поддержкой ранних версий браузера */
document.getElementById('test1').style.perspective=value + "px";  /* изменение стиля элемента */ 
document.getElementById('test1').style.webkitPerspective=value + "px";  /* для поддержки ранних версий браузеров */ 
document.getElementById('test1').style.mozPerspective=value + "px";  /* для поддержки ранних версий браузеров */ 
document.getElementById('info').innerHTML=value + "px";  /* вывод текущего значения */ 
}
</script>
</head>
	<body>
		Измените значение перспективы:
		<input  type = "range" min = "30" max = "1000" value = "80" onchange = "changeP(this.value)"><br>
		perspective:<span  id = "info"> 80px</span> ;
		<div id = "test">
			<div id = "test2">TEXT
			</div>
		</div>
	</body>
</html>

CSS perspective

Пример

Присвойте элементу с трехмерным позиционированием некоторую перспективу:

#div1 {
    -webkit-perspective: 100px; /* Safari 4-8 */
    perspective: 100px;
}

Подробнее примеры ниже.

Определение и использование

Свойство perspective используется для придать элементу с трехмерным позиционированием некоторую перспективу.

Свойство perspective определяет, насколько объект находится вдали от пользователя. Таким образом, более низкое значение приведет к более интенсивному трехмерному эффекту, чем более высокое значение.

При определении свойства perspective для элемента, это дочерние элементы, которые получают представление перспективы, а не сам элемент.

Совет: Также посмотрите на свойство perspective-origin, которое определяет, в каком положении пользователь смотрит на трехмерный объект.

Чтобы лучше понять свойство «Перспектива», Просмотрите демонстрацию.

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.

Синтаксис CSS

perspective: length|none;

Значения свойств

Другие примеры

Пример

Создайте куб и задайте различные точки зрения:

.ex2 {
    perspective: 150px;
}

Похожие страницы

CSS Справочник: CSS 3D Transforms

HTML DOM Справочник: perspective Свойство

perspective | Справочник CSS | schoolsw3.com

На сайте нет рекламы

Пример

Дать 3D позиционированному элементу некоторую перспективу:

#div1 {
  -webkit-perspective: 100px; /* Safari 4-8 */
  perspective: 100px;
}

Определение и использование

Свойство perspective используется для придания 3D-позиционированному элементу некоторой перспективы.

Свойство perspective свойство определяет, на каком расстоянии объект находится от пользователя. Таким образом, более низкое значение приведет к более интенсивному 3D-эффекту, чем более высокое значение.

При определении свойства perspective для элемента, вид перспективы получают дочерние элементы, а не сам элемент.

Совет: Также посмотрите на свойство perspective-origin, которое определяет, в какой позиции пользователь смотрит на 3D-объект.

Чтобы лучше понять свойство perspective, просмотр демо-версии.

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следует -webkit- или -moz- указывают первую версию, которая работала с префиксом.

CSS Синтаксис

perspective: length|none;

Значение свойств

Примеры

Пример

Создать куб и задать различные перспективы:

.ex2 {
  perspective: 150px;
}

Связанные страницы

CSS Учебник: CSS 3D Трансформация

HTML DOM Справочник: Свойство perspective

Почему свойство CSS «perspective» в Safari ломает оптимизацию графики для 4К и 5К дисплеев в случае повторного использования?

.st-effect-11.st-menu-open .st-pusher {
    perspective(1500px) translate3d(100px, 0, -600px) rotateY(-20deg)
}
.st-effect-11.st-container {}

let stMenuTransformPrevious, stMenuTransitionPrevious = ''

// after open
requestAnimationFrame(function() { // выполняем действия в новом кадре композиции
  stMenuNode.style.transition = 'none' // убираем transition, так как после мы убираем transform

  requestAnimationFrame(function() { // выполняем в следующем кадре композиции
    stMenuNode.style.transform = 'none'
    stMenuNode.style.left = '0px'
  })
})

// before close
requestAnimationFrame(function() {
  stMenuNode.style.transition = '' // возвращаем transition из css

  requestAnimationFrame(function() { // выполняем в следующем кадре композиции
    stMenuNode.style.left = '' // в зависимости от того, как до этого двигали меню
    stMenuNode.style.transform = '' // применяется transform из css
  })
})

Применительно именно к вашему случаю, stMenuNode.style.left = '0px' назначать не нужно, так как меню и так по умолчанию находится слева.

Причина блюра на тексте в том, что для высокого разрешения просто не хватает аппаратных ресурсов, чтобы картинку рендерить и с ускорением, и в высоком разрешении. Такой же эффект с блюром появляется и на sd-дисплеях. Вообще лучше transform использовать только для анимаций, и, если возможно, после завершения анимации для лучшего рендеринга и разгрузки позиционировать элементы margin/left/top.

— CSS: Каскадные таблицы стилей

Свойство CSS определяет расстояние между плоскостью z = 0 и пользователем, чтобы придать трехмерному позиционируемому элементу некоторую перспективу.

 
перспектива: нет;


перспектива: 20 пикселей;
перспектива: 3.5em;


перспектива: наследование;
перспектива: начальная;
перспектива: вернуться;
перспектива: снятая;
  

Значения

нет

Указывает, что преобразование перспективы не применяется.

<длина>

, указывающее расстояние от пользователя до плоскости z = 0. Он используется для применения преобразования перспективы к элементу и его содержимому. Если значение равно 0 или отрицательное число, перспективное преобразование не применяется.

Каждый трехмерный элемент с z> 0 становится больше; каждый 3D-элемент с z <0 становится меньше. Сила эффекта определяется величиной этого свойства.

Части трехмерных элементов, которые находятся позади пользователя, т. Е. Их координаты по оси Z больше, чем значение свойства CSS перспективы , не отрисовываются.

Точка схода по умолчанию размещается в центре элемента, но ее положение можно изменить с помощью свойства перспектива-происхождение .

Использование этого свойства со значением, отличным от 0 и нет создает новый контекст наложения.Кроме того, в этом случае объект будет действовать как содержащий блок для позиции : фиксированные элементов, которые он содержит.

Настройка перспективы

В этом примере показан куб с перспективой, установленной в разных положениях. Скорость сжатия куба определяется свойством перспективы . Чем меньше его значение, тем глубже перспектива.

HTML

HTML-код ниже создает четыре копии одного и того же блока с разными значениями перспективы.

  <таблица>
  
    
        перспектива: 250 пикселей; 
      
        перспектива: 350 пикселей; 
      
    
    
      
        

          

            
 1 
            
 2 
            
 3 
            
 4 
            
 5 
            
 6 
          
        
      
      
        

          

            
 1 
            
 2 
            
 3 
            
 4 
            
 5 
            
 6 
          
        
      
    
    
        перспектива: 500 пикселей; 
      
        перспектива: 650 пикселей; 
      
    
    
      
        

          

            
 1 
            
 2 
            
 3 
            
 4 
            
 5 
            
 6 
          
        
      
      
        

          

            
 1 
            
 2 
            
 3 
            
 4 
            
 5 
            
 6 
          
        
      
    
  

  

CSS

CSS устанавливает классы, которые можно использовать для установки перспективы на разные расстояния.Он также включает классы для контейнера и самого куба, а также каждой его грани.

 
.pers250 {
  перспектива: 250 пикселей;
}

.pers350 {
  перспектива: 350 пикселей;
}

.pers500 {
  перспектива: 500 пикселей;
}

.pers650 {
  перспектива: 650 пикселей;
}


.container {
  ширина: 200 пикселей;
  высота: 200 пикселей;
  margin: 75px 0 0 75px;
  граница: нет;
}

.cube {
  ширина: 100%;
  высота: 100%;
  обратная видимость: видимая;
  перспективное происхождение: 150% 150%;
  стиль преобразования: сохранить-3d;
}

.лицо {
  дисплей: блок;
  позиция: абсолютная;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  граница: нет;
  высота строки: 100 пикселей;
  семейство шрифтов: без засечек;
  размер шрифта: 60 ​​пикселей;
  белый цвет;
  выравнивание текста: центр;
}


.фронт {
  фон: rgba (0, 0, 0, 0.3);
  преобразовать: translateZ (50 пикселей);
}

.назад {
  фон: rgba (0, 255, 0, 1);
  черный цвет;
  преобразовать: rotateY (180deg) translateZ (50px);
}

.верно {
  фон: rgba (196, 0, 0, 0,7);
  преобразовать: rotateY (90deg) translateZ (50px);
}

.левый {
  фон: rgba (0, 0, 196, 0,7);
  преобразовать: rotateY (-90deg) translateZ (50px);
}

.вершина {
  фон: rgba (196, 196, 0, 0,7);
  преобразовать: rotateX (90deg) translateZ (50px);
}

.Нижний {
  фон: rgba (196, 0, 196, 0.7);
  преобразовать: rotateX (-90deg) translateZ (50px);
}


th, p, td {
  цвет фона: #EEEEEE;
  отступ: 10 пикселей;
  семейство шрифтов: без засечек;
  выравнивание текста: слева;
}
  

Результат

Таблицы BCD загружаются только в браузере

перспектива | Codrops

Свойство перспективы используется для активации трехмерного пространства элемента, чтобы его дочерние элементы могли быть расположены в этом пространстве.

Это позволяет вам добавить ощущение глубины в сцену, делая элементы, расположенные выше по оси Z (ближе к зрителю), кажутся больше, а те, что дальше, — меньше.

Без указания перспективы элемент, преобразованный с помощью функции трехмерного преобразования, будет выглядеть плоским и двухмерным.

Свойство перспективы используется вместе с преобразованиями CSS. Он принимает либо значение длины, либо ключевое слово none . Использование этого свойства с любым значением, отличным от none устанавливает контекст стекирования. Он также устанавливает содержащий блок (в чем-то похожий на position : relative ), как и свойство transform .

На следующем изображении показан результат преобразования (поворота) элемента в трехмерном пространстве с заданной перспективой и без нее.

Если у вас есть элемент, который вы хотите преобразовать в трехмерное пространство, вы можете активировать это пространство, используя свойство перспективы на его родительском элементе или используя функцию перспектива () на самом преобразованном элементе. Так в чем разница между этими двумя способами? и когда вы хотите использовать одно, а не другое?

И свойство перспектива , и функция перспектива () используются для придания глубины элементам, делая элемент, расположенный выше по оси z (ближе к зрителю), кажется больше, а элемент дальше — меньше.Чем меньше значение, тем ближе z-панель к зрителю и тем более впечатляющий эффект; чем выше значение, тем дальше элемент от экрана и тем более тонким будет эффект.

Когда вы применяете перспективу к элементу с помощью функции перспектива () (см. Запись свойства transform , чтобы узнать, как это работает), вы активируете трехмерное пространство только для этого элемента. С другой стороны, свойство перспективы полезно, когда вы хотите активировать трехмерное пространство на элементе, имеющем несколько дочерних элементов, которые все преобразованы с помощью трехмерных преобразований.И свойство, и функциональная нотация запускают трехмерное пространство.

Функциональная запись удобна при применении трехмерного преобразования к отдельному элементу. Но когда у вас есть несколько преобразованных элементов внутри контейнера, если для каждого из них установлена ​​перспектива с помощью функции перспектива () , элементы не выстраиваются в линию, как ожидалось. Это потому, что у каждого из них есть собственное трехмерное пространство и, следовательно, своя собственная точка схода.

По умолчанию точка схода для трехмерного пространства располагается в центре. (Его можно изменить с помощью свойства pective-origin .) Если элементы не находятся в одном и том же трехмерном пространстве , каждый из них будет иметь собственную точку схода. Таким образом, использование перспектива () приведет к тому, что каждый элемент будет иметь свое собственное пространство и, следовательно, свою собственную точку схода. Чтобы избежать этого и позволить элементам выстроиться в линию, они должны находиться в одном пространстве.Используя свойство перспективы на контейнере, создается трехмерное пространство, которое используется всеми его дочерними элементами.

На следующем изображении показан результат запуска трехмерного пространства в контейнере, дочерние элементы которого вращаются в этом пространстве (слева), и повторного запуска трехмерного пространства на каждом элементе с использованием функции перспектива () (справа ):

Результат запуска трехмерного пространства в контейнере, дочерние элементы которого вращаются в этом пространстве (слева), и результат запуска трехмерного пространства для каждого элемента с использованием функции перспективы () (справа)

Live Demo

Перспектива элемента может быть лучше всего визуализирована на трехмерной форме, такой как, например, куб.

В этой демонстрации представлены три одинаковых куба с одинаковыми преобразованиями. У каждого из них свой набор перспектив. Попробуйте изменить значения перспективы, чтобы увидеть, как меняется глубина сцены.

Чем выше значение перспективы, тем менее интенсивен эффект, а чем ниже значение перспективы, тем интенсивнее эффект.

  
 

  Всегда  
  доставлять  
  качество  
   

  h2 {
 семейство шрифтов: Helvetica, Arial, sans-serif; 
 font-size: 70px; 
 font-weight: 900; 
 преобразование текста: прописные; 
 позиция: относительная; 
 margin-left: -350px; 
 margin-top: -150 пикселей; 
}  

  h2 {диапазон 
 {положение 
: абсолютное; 
} 
}  

  h2 {
 span {
 &: nth-child (odd) {
 transform: skew (60deg, -30deg) scaleY (0.66667); 
} 
 &: nth-child (even) {
 transform: skew (0deg, -30deg) scaleY (1.33333); 
} 
} 
}  

  h2 {
 span {
 &: nth-child (2) {
 left: 27px; 
 верх: 52 пикс .; 
} 
 &: nth-child (3) {
 left: 54px; 
 верх: 105 пикселей; 
} 
} 
}  

перспектива: нет;


перспектива: 20 пикселей;
перспектива: 3.5em;


перспектива: наследование;
перспектива: начальная;
перспектива: снятая;
 

 нет | <длина> 

 <таблица>
  
    
        перспектива: 250 пикселей; 
      
        перспектива: 350 пикселей; 
      
    
    
      
        

          

            
 1 
            
 2 
            
 3 
            
 4 
            
 5 
            
 6 
          
        
      
      
        

          

            
 1 
            
 2 
            
 3 
            
 4 
            
 5 
            
 6 
          
        
      
    
    
        перспектива: 500 пикселей; 
      
        перспектива: 650 пикселей; 
      
    
    
      
        

          

            
 1 
            
 2 
            
 3 
            
 4 
            
 5 
            
 6 
          
        
      
      
        

          

            
 1 
            
 2 
            
 3 
            
 4 
            
 5 
            
 6 
          
        
      
    
  

 

.pers250 {
  перспектива: 250 пикселей;
}

.pers350 {
  перспектива: 350 пикселей;
}

.pers500 {
  перспектива: 500 пикселей;
}

.pers650 {
  перспектива: 650 пикселей;
}


.container {
  ширина: 200 пикселей;
  высота: 200 пикселей;
  margin: 75px 0 0 75px;
  граница: нет;
}

.cube {
  ширина: 100%;
  высота: 100%;
  обратная видимость: видимая;
  перспективное происхождение: 150% 150%;
  стиль преобразования: сохранить-3d;
}

.лицо {
  дисплей: блок;
  позиция: абсолютная;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  граница: нет;
  высота строки: 100 пикселей;
  семейство шрифтов: без засечек;
  размер шрифта: 60 ​​пикселей;
  белый цвет;
  выравнивание текста: центр;
}


.фронт {
  фон: rgba (0, 0, 0, 0.3);
  преобразовать: translateZ (50 пикселей);
}

.назад {
  фон: rgba (0, 255, 0, 1);
  черный цвет;
  преобразовать: rotateY (180deg) translateZ (50px);
}

.верно {
  фон: rgba (196, 0, 0, 0,7);
  преобразовать: rotateY (90deg) translateZ (50px);
}

.левый {
  фон: rgba (0, 0, 196, 0,7);
  преобразовать: rotateY (-90deg) translateZ (50px);
}

.вершина {
  фон: rgba (196, 196, 0, 0,7);
  преобразовать: rotateX (90deg) translateZ (50px);
}

.Нижний {
  фон: rgba (196, 0, 196, 0.7);
  преобразовать: rotateX (-90deg) translateZ (50px);
}


th, p, td {
  цвет фона: #EEEEEE;
  отступ: 10 пикселей;
  семейство шрифтов: без засечек;
  выравнивание текста: слева;
} 

При определении свойства перспективы-происхождения для элемента это элементы CHILD. который получит эффект, а НЕ сам элемент.

Примечание: Это свойство должно использоваться вместе с перспективная недвижимость!

Чтобы лучше понять свойство перспективы-происхождения, просмотреть демо.

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.

Синтаксис CSS

перспектива происхождения: ось x ось y | начальная | наследование;

Значения свойств

связанные страницы

Учебное пособие по CSS: 3D-преобразования CSS

HTML DOM: Перспективы происхождения собственности

CSS {В реальной жизни}

3D-преобразований, несмотря на то, что некоторое время они доступны в CSS, — это область, которую я никогда не понимал. Думаю, если бы они были новичками в CSS сейчас, я бы потратил гораздо больше времени, играя с ними, как это было с Motion Path и некоторыми другими новыми функциями CSS.В настоящее время у меня никогда не было особых причин использовать их в продакшене (за редким исключением), поэтому я сконцентрировал свое время и силы на других вещах.

Но недавняя работа талантливых людей над Codepen заставила меня пожелать, чтобы я лучше разбирался в этой мощной области CSS. Я влюбился в эту демонстрацию Адама Куна, которая сочетает в себе трехмерные преобразования с траекторией движения — я вижу гораздо больше возможностей для использования их вместе. Ана Тюдор создала целую серию Johnson Solids, которые становятся все более сложными.У нее впечатляющий объем работ по кодированию многогранников, которые можно найти в этой коллекции. Не говоря уже об этой просто умопомрачительной демонстрации моего Амита Шина, где страницы книги фактически анимированы с помощью трехмерных преобразований:

Я решил, что пора учиться! Я наткнулся на эту хорошо написанную статью, также написанную Амитом Шином, в которой объясняются трехмерные преобразования и перспектива. Интерактивные примеры в сочетании с пошаговым пошаговым руководством по созданию анимированного куба действительно помогли в работе. Я с нетерпением жду возможности создавать намного больше с помощью 3D-преобразований в будущем и чувствую себя намного увереннее!

Чтобы проверить свои новые знания, я сделал небольшую CSS-анимацию, вдохновленную GIF-файлом, который я видел в Интернете.Он использует один