Веб-мастерская Ларисы ВоронинойСоздание 3D перспективы с помощью CSS
WEB-мастерская Ларисы Ворониной logo

Создание 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);
}


Рейтинг@Mail.ru