Создание 3D перспективы с помощью CSS Июл 18 2017

3D Перспектива в CSS создаётся с помощью свойств perspective, perspective-origin совместно со свойством transform.

Свойство CSS Perspective.

Свойство perspective задаёт дочернему элементу глубину по оси Z в пикселях. Чем меньше значение, тем больше глубина. Значение none означает, что глубины нет.

Работает это свойство в том случае, если у дочернего элемента прописано свойство transform со значением rotate.

Рассмотрим на примере.

В HTML разметке (в index.html) создадим блок div, внутри которого будет располагаться картинка img, которая будет трансформироваться в перспективе.

<!DOCTYPE html>
<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.

div {
margin: auto;
width:200px;
margin-top:50px;
perspective: 100px;
background:#ccc;
}
img {
transform: rotateX(45deg);
}

Если свойству perspective дадим значение больше, то глубина элемента уменьшится.

div {
margin: auto;
width:200px;
margin-top:50px;
perspective: 500px;
background:#ccc;
}
img {
transform: rotateX(45deg);
}

Свойство CSS Perspective-origin.

Свойство Perspective-origin определяет, где именно на осях x и y располагается 3D элемент. Значение указывается в процентах.

Синтаксис выглядит так

perspective-origin: x-ось y-ось

Значение по умолчанию:

perspective-origin:50% 50%

Пример.

div {
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 вниз.

div {
margin: auto;
width:200px;
margin-top:50px;
perspective: 100px;
perspective-origin:50% 100%;
background:#ccc;
}
img {
transform: rotateX(45deg);
}

Получайте новые статьи по почте

Категории

Создание 3D перспективы с помощью CSS Июл 18 2017

Свойство CSS Perspective.

Свойство CSS Perspective-origin.

Категории

Страницы