巧用 filter 和 transform-style 属性创建视觉 3D 特效

1. 前言

随着 CSS 技术的不断发展，越来越多的精彩特效应运而生。本文将介绍如何通过巧妙运用filter和transform-style属性创造视觉 3D 特效，希望对 CSS 爱好者们有所帮助。

2. filter 属性

2.1 blur() 模糊效果

通过使用blur()函数，可以轻松实现模糊效果。这个函数利用高斯模糊算法对图像进行模糊处理。

/* 给元素添加模糊效果 */
.element{
  filter: blur(5px);
}

上述 filter 属性中的值设为 5px，表示对元素进行 5 像素半径的模糊处理。

2.2 saturate() 饱和度

使用saturate()函数，可以改变图像的饱和度。

/* 给元素添加饱和度效果 */
.element{
  filter: saturate(200%);
}

上述 filter 属性中的值为 200%，表示将元素的饱和度提高到原来的 2 倍。

3. transform-style 属性

3.1 嵌套的 3D 转换

通过设置transform-style属性，可以在元素内部创建一个自己的 3D 空间。

/* 创建元素的内部 3D 空间 */
.element{
  transform-style: preserve-3d;
}

上述 transform-style 的值为 preserve-3d，表示创建一个父元素内部的 3D 空间。

3.2 rotateY() 水平翻转

通过使用rotateY()函数，可以在水平方向上旋转元素。

/* 元素绕 Y 轴水平翻转 180 度 */
.element{
  transform: rotateY(180deg);
}

上述 transform 属性中的值为 rotateY(180deg)，表示元素绕 Y 轴水平翻转 180 度。

4. 应用示例

在下面的示例中，我们将结合filter和transform-style两个属性，创建出一个立体旋转的盒子示例。

.box{
  width: 300px;
  height: 300px;
  background-color: #26a69a;
  margin: auto;
  margin-top: 25px;
  position: relative;
  border-radius: 10px;
  -webkit-animation: aniRotate 5s linear infinite;
  animation: aniRotate 5s linear infinite;
  transform-style: preserve-3d;
  >span{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 100%, 0.1);
    transform: translateZ(40px) rotateX(90deg);
    filter: blur(5px);
    box-shadow: 0 0 50px hsla(0, 0%, 100%, 0.8) inset;
    border-radius: 10px;
    display: block;
    transition: .8s all .3s;
    &:before, &:after{
      content: '';
      position: absolute;
      width: 20%;
      height: 20%;
      background-color: hsla(0, 0%, 100%, 0.1);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      filter: blur(5px);
      box-shadow: 0 0 50px hsla(0, 0%, 100%, 0.8) inset;
      transition: .8s all .3s;
      border-radius: 10px;
    }
    &:before{
      transform: translate(-50%, -50%) rotateY(90deg);
    }
    &:after{
      transform: translate(-50%, -50%) rotateY(-90deg);
    }
  }
}
@-webkit-keyframes aniRotate {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@keyframes aniRotate {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

在上述示例中，我们通过filter属性给盒子添加模糊效果，并使用transform-style属性将盒子的内部设为 3D 空间。

接下来，我们为盒子内部添加一个<span>元素，并利用transform属性将其旋转至盒子外表。

最后，我们可以看到，通过巧妙运用filter和transform-style属性，我们成功创建了一个视觉 3D 特效的立体旋转盒子，实现了非常炫酷的效果。

5. 结尾

本文为大家介绍了如何通过filter和transform-style两个属性来创建视觉 3D 特效。希望对 CSS 爱好者们有所帮助。