Свойство perspective

Описание

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

Синтаксис

perspective: none | размер;

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 .test {
 perspective: 800px;
 text-align: center;
 }
 .left {
 transform: rotateY(-50deg);
 width: 300px;
 transform-origin: right center;
 }
 </style>
 <div class='test'>
 <img src='/files/images/regular/body-img.jpg' alt='' class='left' />
 </div>
</body>
</html>

Читайте также