Элемент с фильтром размытия обрезается только под определенными углами - PullRequest
Новая
       34

Элемент с фильтром размытия обрезается только под определенными углами

1 голос
/ 05 июля 2019

Я использую псевдоэлемент ::after для рендеринга в качестве размытой тени другого для имитации 3D-сцены. Однако этот элемент обрезается только тогда, когда прямоугольник и его тень не повернуты (поворот на 0 градусов) - после поворота влево или вправо тень полностью раскрывается. Я понимаю, что в некоторых случаях фильтруемый и повернутый 3d элементы не очень хорошо взаимодействуют друг с другом, но я еще не понял этого.

Я использую последнюю версию Chrome (v75) - в Firefox (v67) она работает нормально

Чтобы увидеть изменения, наведенные на левую / правую сторону вида и сравнить с их положением по умолчанию: 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.triggers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.triggers:focus .container .box {
  border-radius: 100px;
}
.triggers .left {
  position: absolute;
  z-index: 1;
  top: 0;
  right: calc(50% + 50px);
  bottom: 0;
  left: 0;
}
.triggers .left:hover ~ .container .box {
  transform: rotateY(-15deg);
}
.triggers .right {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(50% + 50px);
}
.triggers .right:hover ~ .container .box {
  transform: rotateY(15deg);
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  perspective: 200px;
}

.box {
  height: 100px;
  width: 100px;
  border-radius: 0;
  background-image: radial-gradient(farthest-corner at 50% 0, red, transparent);
  background-color: darkred;
  transform: rotateY(0);
  transition: all 300ms ease 0s;
  transform-style: preserve-3d;
}
.box::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.03));
  filter: blur(10px);
  transform-origin: center bottom;
  transform: translate3d(0, 50px, -100px) rotateX(-80deg);
  transition: all 300ms ease 0s;
}
<div class="triggers">
  <div class="left"></div>
  <div class="right"></div>
  
  <div class="container">
    <div class="box"></div>
  </div>
</div>
...