Почему не работает 3d трансформация?

Question

Эксперементировал с трансформациями, но почему-то 3d не работает. Что не так?

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<!-- https://fls.guru/transform.html -->

<body>

    <div class="block"></div>
    <div class="block2"></div>

</body>

</html>

СSS:

/* https://fls.guru/transform.html */

.block {
    display: block;
    margin: 250px auto 0;
    width: 200px;
    height: 200px;
    background-color: black;

    /* transform: rotate(90deg); */
    /* transform: scale(0.2, 2); */
    /* transform: skew(10deg, 10deg); */
    /* transform: matrix(1.2, 0, 0, 1.2, 0, 0); */

    /* transform-origin: 0 0;
    transform: rotate(45deg); */

    perspective: 400px;
}

/* .block:hover {

} */


/* .block2 {
    display: block;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.319);
    margin-top: -200px;
} */

Заранее Спасибо за помощь

Answer 1

Дело в том, что perspective нужно применять к родительскому элементу, в данном случае к body. Но лучше создать отдельный элемент-обертку.

Свойство perspective как бы задает расстояние между плоскостью, к которому применено свойство, и пользователем, и все потомки этого элемента будут отталкиваться от этого расстояния для трансформации.

Ниже небольшая дэмка с объяснениями для понимания.

Есть 2 блока с классами perspective-high и perspective-low с потомками block.

У этих классов заданы разные значения perspective, 400px и 100px соответственно. Повесим на каждый block функции трансформации, translateZ().

.perspective-high > .block:hover {
  transform: translateZ(100px);
}
.perspective-low > .block:hover {
  transform: translateZ(50px);
}

Теперь при наведении на каждый из элементов block можно заметить, что блок к которому было применен небольшой сдвиг, всего 40px, приближается намного ближе, т.к точка perspective изначально ближе к плоскости.

 --- perspective 400px
  |
  |                              
  |                               
  |
  |
 --- translateZ(100px)          --- perspective 100px
  |                              |
  |                             --- translateZ(50px)
  |                              |
 --- translateZ(0px) плоскость  ---------------------------

/* https://fls.guru/transform.html */

body {
  margin: 0;
}

.perspective-high, .perspective-low {
  margin: 0;
  position: fixed;
  width: 50vw;
  height: 100vh;
  perspective-origin: 30% 30%; /*сдвиг точки*/
}

.perspective-high {
  z-index: 1;
  perspective: 400px;
  left: 0;
  border-right: 2px solid black; 
}
.perspective-low {
  z-index: 0;
  right: 0;
  perspective: 100px;
}


.block {
  display: block;
  position: absolute;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transition: .3s ease;
  inset: 10%;
}

.perspective-high > .block {
  background-color: black;
}

.perspective-low > .block {
  background-color: rgba(0, 0, 0, 0.319);
}

.perspective-high > .block:hover {
  transform: translateZ(100px);
}
.perspective-low > .block:hover {
  transform: translateZ(50px);
}

<html lang="en">

  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="style.css">
  </head>

  <!-- https://fls.guru/transform.html -->

  <body>
    <div class="perspective-high">
      <div class="block"></div>
    </div>
    <div class="perspective-low">
      <div class="block"></div>
    </div>
  </body>
</html>

Так что ваша ошибка лишь в том, что вы применяете perspective непосредственно к block, а не к его родителю.

БЛОГ НА HUSL

Почему не работает 3d трансформация?

Ответы (1 шт):