3D 转换元素上的 CSS 模糊过滤器

问题描述

document.querySelector( 'style' ).innerHTML += `
  hr:nth-of-type( 1 ) {
    transform: translateZ( calc( var( --mid ) * 1rem ) );
  }
  hr:nth-of-type( 2 ) {
    transform: translateZ( calc( var( --mid ) * -1rem ) );
  }
  hr:nth-of-type( 3 ) {
    transform: rotateY( 90deg ) translateZ( calc( var( --mid ) * 1rem ) );
  }
  .rotate_y,.rotate_x,hr {
    animation-name: rotateY;
    animation-duration: 8s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes rotateY {
    0% {
      transform: rotateY( 0deg );
    }
    100% {
      transform: rotateY( 360deg );
    }  
  }
  .rotate_x {
    animation-name: rotateX;
  }
  @keyframes rotateX {
    0% { transform: rotateX( 0deg ); }
    100% { transform: rotateX( 360deg ); }  
  }
`

:root {
  --long: 6;
  --mid: calc( var( --long ) / 2 );
}
* {
  Box-sizing: border-Box; transform-style: preserve-3d;
  margin: 0rem; padding: 0rem;
}
html,body { height: 100%; }
body,section,div,span {
  display: flex;
  justify-content: center; align-items: center;
}
body {
  perspective: calc( var( --long ) * 3rem )
}
span:nth-of-type( 2 ) {
  transform: rotateY( 180deg ) rotateX( calc( 90deg ) );
}
span:nth-of-type( 2 ) hr {
  Box-shadow: 0rem 0rem 0rem 0.25rem #000 inset;
}
section,hr {
  position: absolute;
  Box-shadow: 0rem 0rem 0rem 0.25rem #444 inset;
  border-style: none;
  width: calc( var( --long ) * 1rem ); height: calc( var( --long ) * 1rem );
  background-color: rgba( 200,200,0.9 );
}
section {
  Box-shadow: 0rem 0rem 0rem 0rem transparent;
  background-color: transparent;
}

<style>
  hr {
    animation-name: brightness;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;  
    animation-direction: alternate;
  }
  span:nth-of-type( 1 ) hr:nth-of-type( 1 ) {
    animation-delay: 2s;
  }
  span:nth-of-type( 1 ) hr:nth-of-type( 2 ) {
    animation-delay: 3s;
  }
  span:nth-of-type( 1 ) hr:nth-of-type( 3 ),span:nth-of-type( 2 ) hr:nth-of-type( 3 ) {   
    animation-delay: 2s;
  }
  span:nth-of-type( 2 ) hr:nth-of-type( 1 ),span:nth-of-type( 2 ) hr:nth-of-type( 2 ) {
    animation-delay: 1s;
  }
  @keyframes brightness {
    0% { filter: brightness( 110% ); }
    50% { filter: brightness( 50% ); }
    100% { filter: brightness( 110% ); }    
  }
  hr{ filter: blur( 0.5rem ); }
</style>
<section class='rotate_x'>
  <div class='rotate_y'>
    <span> <hr><hr><hr> </span> <span> <hr><hr><hr> </span>
  </div>
</section>

在 chrome 中，这个立方体开始模糊，然后迅速恢复到模糊之前的外观；忽略这一行：

hr{ filter: blur( 0.5rem ); }

下面的 gif 演示了它的外观：

目的是模糊 3D 变换元素的面。我如何使用 Vanilla CSS 实现这一点？

我首先尝试将立方体元素作为一个整体进行模糊处理，这完全打破了这种错觉。在这里，我试图单独模糊每个 hr 或“脸”。还是没有想要的结果

解决方法

您应该将立方体包装在另一个没有应用任何 3D 变换的容器中，例如 .cube：

<section class='cube'>
  <section class='rotate_x'>
    <div class='rotate_y'>
      <span> <hr><hr><hr> </span> <span> <hr><hr><hr> </span>
    </div>
  </section>
</section>

然后您可以毫无问题地对其应用过滤动画：

您还需要将 perspective: calc( var( --long ) * 3rem ); 从 body 移动到 .cube 元素本身。

.cube{ 
  animation: focus 3s linear both alternate;
  perspective: calc( var( --long ) * 3rem );
}
@keyframes focus {
  from {
    filter: blur( 0.5rem );
  }
  
  to {
    filter: blur( 0rem );
  }
}

document.querySelector( 'style' ).innerHTML += `
  hr:nth-of-type( 1 ) {
    transform: translateZ( calc( var( --mid ) * 1rem ) );
  }
  hr:nth-of-type( 2 ) {
    transform: translateZ( calc( var( --mid ) * -1rem ) );
  }
  hr:nth-of-type( 3 ) {
    transform: rotateY( 90deg ) translateZ( calc( var( --mid ) * 1rem ) );
  }
  .rotate_y,.rotate_x,hr {
    animation-name: rotateY;
    animation-duration: 8s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes rotateY {
    0% {
      transform: rotateY( 0deg );
    }
    100% {
      transform: rotateY( 360deg );
    }  
  }
  .rotate_x {
    animation-name: rotateX;
  }
  @keyframes rotateX {
    0% { transform: rotateX( 0deg ); }
    100% { transform: rotateX( 360deg ); }  
  }
`

:root {
  --long: 6;
  --mid: calc( var( --long ) / 2 );
}
* {
  box-sizing: border-box; transform-style: preserve-3d;
  margin: 0rem; padding: 0rem;
}
html,body { height: 100%; }
body,section,div,span {
  display: flex;
  justify-content: center; align-items: center;
}
span:nth-of-type( 2 ) {
  transform: rotateY( 180deg ) rotateX( calc( 90deg ) );
}
span:nth-of-type( 2 ) hr {
  box-shadow: 0rem 0rem 0rem 0.25rem #000 inset;
}
section,hr {
  position: absolute;
  box-shadow: 0rem 0rem 0rem 0.25rem #444 inset;
  border-style: none;
  width: calc( var( --long ) * 1rem ); height: calc( var( --long ) * 1rem );
  background-color: rgba( 200,200,0.9 );
}
section {
  box-shadow: 0rem 0rem 0rem 0rem transparent;
  background-color: transparent;
}
.cube{ 
  animation: focus 3s linear both alternate;
  perspective: calc( var( --long ) * 3rem );
}
  
@keyframes focus {
  from {
    filter: blur( 0.5rem );
  }
  
  to {
    filter: blur( 0rem );
  }
}

<style>
  hr {
    animation-name: brightness;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;  
    animation-direction: alternate;
  }
  span:nth-of-type( 1 ) hr:nth-of-type( 1 ) {
    animation-delay: 2s;
  }
  span:nth-of-type( 1 ) hr:nth-of-type( 2 ) {
    animation-delay: 3s;
  }
  span:nth-of-type( 1 ) hr:nth-of-type( 3 ),span:nth-of-type( 2 ) hr:nth-of-type( 3 ) {   
    animation-delay: 2s;
  }
  span:nth-of-type( 2 ) hr:nth-of-type( 1 ),span:nth-of-type( 2 ) hr:nth-of-type( 2 ) {
    animation-delay: 1s;
  }
  @keyframes brightness {
    0% { filter: brightness( 110% ); }
    50% { filter: brightness( 50% ); }
    100% { filter: brightness( 110% ); }    
  }
</style>
<section class='cube'>
  <section class='rotate_x'>
    <div class='rotate_y'>
      <span> <hr><hr><hr> </span> <span> <hr><hr><hr> </span>
    </div>
  </section>
</section>