亮度（）函数和 preserve-3d 不能一起工作答案

【问题标题】：brightness() function and preserve-3d are not working together亮度（）函数和 preserve-3d 不能一起工作
【发布时间】：2019-10-11 06:32:13
【问题描述】：

我在我的div 上尝试blur，但它不起作用，因为我使用了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>

【问题讨论】：

标签： html css css-transforms css-filters

【解决方案1】：

您需要将过滤器应用于上层容器：

* {
  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>

【讨论】：

但是如果容器的宽度是 997px 而包装器 div 是 400px 呢？该容器上可能还有其他一些 div，我必须将该模糊功能放在一个中！那我该怎么办