3D Перспектива в CSS создаётся с помощью свойств perspective, perspective-origin совместно со свойством transform.
Свойство CSS Perspective.
Свойство perspective задаёт дочернему элементу глубину по оси Z в пикселях. Чем меньше значение, тем больше глубина. Значение none означает, что глубины нет.
Работает это свойство в том случае, если у дочернего элемента прописано свойство transform со значением rotate.
Рассмотрим на примере.
В HTML разметке (в index.html) создадим блок div, внутри которого будет располагаться картинка img, которая будет трансформироваться в перспективе.
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>3D перспектива</title>
</head>
<body>
<div>
<img src="images/img1.jpg">
</div>
</body>
</html>
В файле style.css свойство perspective мы будем применять к элементу div, а свойство transform к элементу img.
margin: auto;
width:200px;
margin-top:50px;
perspective: 100px;
background:#ccc;
}
img {
transform: rotateX(45deg);
}
Если свойству perspective дадим значение больше, то глубина элемента уменьшится.
margin: auto;
width:200px;
margin-top:50px;
perspective: 500px;
background:#ccc;
}
img {
transform: rotateX(45deg);
}
Свойство CSS Perspective-origin.
Свойство Perspective-origin определяет, где именно на осях x и y располагается 3D элемент. Значение указывается в процентах.
Синтаксис выглядит так
Значение по умолчанию:
Пример.
margin: auto;
width:200px;
margin-top:50px;
perspective: 100px;
perspective-origin:50% 0%;
background:#ccc;
}
img {
transform: rotateX(45deg);
}
Мы видим, что расположение картинки сместилось по оси Y вверх на 50%.
А если мы изменим значение Y свойства perspective-origin на 100%, то расположение картинки сместится по оси Y вниз.
margin: auto;
width:200px;
margin-top:50px;
perspective: 100px;
perspective-origin:50% 100%;
background:#ccc;
}
img {
transform: rotateX(45deg);
}
