Рендеринг HTML-элементов с помощью perspective?
Цель состоит в том, чтобы визуализировать элементы 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?
Как вы сказали, используйте перспективу в сочетании с некоторым вращением:
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" >Смотри связанный вопрос для более подробной информации:
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
- Почему SERVER_ADDR имеет не тот IP 49982 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31908 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25943 visits
- Как через css изменить цвет png изображения? 11729 visits
- Blob video url download 11277 visits
- Php curl запрос через прокси с авторизацией 10683 visits
- Работа с captcha vk api 9479 visits
© "hostciti.net" 16.1.2026 | 15:39