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

#html #css #css3 #html5

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





    

Ответы

Ответ 1

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



img {
  width:150px;
  margin:20px;
}
img.first {
  transform:perspective(500px) rotateY(20deg);
}
img.last {
  transform:perspective(500px) rotateY(-20deg);
}








img {
  width:150px;
  margin:30px;
  transform:perspective(500px)  rotateY(15deg) rotateX(50deg) rotateZ(-20deg);
}





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