Функция яркости () и preserve-3d не работают вместе - PullRequest
Новая
       73

Функция яркости () и preserve-3d не работают вместе

3 голосов
/ 11 октября 2019

Я пытался размытие на моем div, но он не работал, поскольку я использовал transform-style: preserve-3d. Но я хочу использовать оба.

В чем может быть причина этого и есть ли другой способ использовать оба свойства? 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.7s ease-in-out;
}

.wrapper {
  width: 400px;
  height: 250px;
/*   filter: brightness(70%); */
  perspective: 800px;
  perspective-origin: center center;
  margin: 100px auto;
  transform: rotateY(50deg);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* backface-visibility: hidden; */
  box-shadow: 0px 0px 15px 1px #aaa;
  background: rgb(254,187,187);
  background: -moz-linear-gradient(left,  rgba(254,187,187,1) 0%, rgba(254,144,144,1) 45%, rgba(255,92,92,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);
  background: linear-gradient(to right,  rgba(254,187,187,1) 0%,rgba(254,144,144,1) 45%,rgba(255,92,92,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febbbb', endColorstr='#ff5c5c',GradientType=1 );
}

.box {
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  transform-origin: top;
  animation: flip 7s ease-in-out 0s infinite; 
}

@keyframes flip {
  from {
    transform: rotateX(30deg);
  }
  50% {
    transform: rotateX(-30deg);
  }
  to {
    transform: rotateX(30deg);
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="wrapper">
    <div class="box">
    </div>
  </div>
</div>
</body>
</html>

1 Ответ

1 голос
/ 11 октября 2019

Вам необходимо применить фильтр к верхнему контейнеру: 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.7s ease-in-out;
}

.container {
  filter: brightness(70%);
}

.wrapper {
  width: 400px;
  height: 250px;
  perspective: 800px;
  perspective-origin: center center;
  margin: 100px auto;
  transform: rotateY(50deg);
  transform-style: preserve-3d;
  box-shadow: 0px 0px 15px 1px #aaa;
  background: linear-gradient(to right, rgba(254, 187, 187, 1) 0%, rgba(254, 144, 144, 1) 45%, rgba(255, 92, 92, 1) 100%);
}

.box {
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  transform-origin: top;
  animation: flip 7s ease-in-out 0s infinite;
}

@keyframes flip {
  from {
    transform: rotateX(30deg);
  }
  50% {
    transform: rotateX(-30deg);
  }
  to {
    transform: rotateX(30deg);
  }
}
<div class="container">
  <div class="wrapper">
    <div class="box">
    </div>
  </div>
</div>
...