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

1. 前言

随着 CSS 技术的不断发展,越来越多的精彩特效应运而生。本文将介绍如何通过巧妙运用filtertransform-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. 应用示例

在下面的示例中,我们将结合filtertransform-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属性将其旋转至盒子外表。


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

5. 结尾

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