title: brightness() function and preserve-3d are not working together
body: <p>I was trying <strong>blur</strong> on my <code>div</code> but it wasn't working as i have used <code>transform-style: preserve-3d</code>.
  But I want to use both. </p>
  
  <p>What can be the reason for this and is there any other way to use both properties?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    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);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
    &lt;div class="wrapper"&gt;
      &lt;div class="box"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>