Рендеринг HTML-элементов с помощью perspective?

124
30 апреля 2021, 15:50

Цель состоит в том, чтобы визуализировать элементы HTML в перспективе, как в примерах ниже.

Я попытался использовать правило CSS skew transformations, но при этом изображения выглядели неправильно, поскольку они искажали соотношение сторон элемента или иным образом создавали искажения.

Ниже в примере, CSS skew transformation, которые я использовал. Но, ни один из результатов не выглядит так хорошо, как на изображениях ниже.

Codepen: https://codepen.io/anon/pen/MMzdPx

transform: skew(20deg, -15deg);
transform: skew(45deg, -25deg);
transform: skew(45deg, -30deg);

Как добиться такого рода перспективного рендеринга элементов HTML?

Answer 1

Как вы сказали, используйте перспективу в сочетании с некоторым вращением: 

img { 
  width:150px; 
  margin:20px; 
} 
img.first { 
  transform:perspective(500px) rotateY(20deg); 
} 
img.last { 
  transform:perspective(500px) rotateY(-20deg); 
}
<img src="https://i.imgur.com/DGAOsPz.png" class="first"> 
<img src="https://i.imgur.com/DGAOsPz.png" class="last">

img { 
  width:150px; 
  margin:30px; 
  transform:perspective(500px)  rotateY(15deg) rotateX(50deg) rotateZ(-20deg); 
}
<img src="https://i.imgur.com/DGAOsPz.png" >

Смотри связанный вопрос для более подробной информации:

READ ALSO
Как выбрать дочерние элементы первого уровня
HTML

Как выбрать дочерние элементы первого уровня

Как изменить стили только у li с надписью Категория 1 ур

 116
Загрузка фото через инпут
HTML

Загрузка фото через инпут

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

 125
Как запретить скролл не ставя overflow:hidden
HTML

Как запретить скролл не ставя overflow:hidden

 109
Как однозначно с позиционировать гейм объекты во время переключения между сценами?
c#

Как однозначно с позиционировать гейм объекты во время переключения между сценами?

У меня GameObject-ы вложены в родительский объект "Vehicles":

 184