4

Цель состоит в том, чтобы визуализировать элементы 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?

enter image description here enter image description here enter image description here enter image description here

2

1 ответ 1

4

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

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" >

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.