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

这篇文章主要讲解了“怎么用filter和transform-style属性创建视觉3D特效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用filter和transform-style属性创建视觉3D特效”吧！

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都网站制作、黄州网络推广、成都微信小程序、黄州网络营销、黄州企业策划、黄州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供黄州建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

我们都知道，在正常的视觉效果中，离我们越近的通常我们会看的越清晰，而离我们较远则相对没那么清晰~

我们可以利用清晰与模糊两种状态来构建视差效果。像是这样：

而在 CSS 中，我们可以利用模糊滤镜 filter: blur() 与 transform-style: preserve-3d 来实现它们。

实现一个文字的 3D 变换

首先，我们需要实现一个文字的 3D 变换，这个比较简单。主要是借助 transform-style: preserve-3d 和 perspective，以及让文字绕 Y 轴进行旋转即可。

简单的代码如下：

CSS3DEFFECT

body {
    perspective: 160vmin;
}

p {
    font-size: 24vmin;
    transform-style: preserve-3d;
    animation: rotate 10s infinite ease-in-out;
}

@keyframes rotate {
    0% {
        transform: rotateY(-45deg);
    }
    50% {
        transform: rotateY(45deg);
    }
    100% {
        transform: rotateY(-45deg);
    }
}

我们就可以得到这样一个 3D 文字效果：

实现文字的模糊

这个效果已经有了初步的 3D 效果，但是仅仅是这样，会觉得少了些什么。接下来我们就需要补充一下模糊的效果，让距离我们近的文字清晰，远离我们的文字模糊。

但这样就需要对每个文字进行精细化处理，上面的 HTML 结构无法做到对每一个文字的单独处理，我们简单改造一下结构：

    C
    S
    S
    3
    D
    E
    F
    F
    E
    C
    T

完整的代码大概是这样：

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

$count: 12;

body, html {
    font-family: 'Lobster', cursive;
    perspective: 160vmin;
    overflow: hidden;
}

p {
    margin: auto;
    font-size: 24vmin;
    transform-style: preserve-3d;
    animation: rotate 10s infinite ease-in-out;
    
    span {
        text-shadow: 
            1px 1px 0 rgba(0, 0, 0, .9),
            2px 2px 0 rgba(0, 0, 0, .7),
            3px 3px 0 rgba(0, 0, 0, .5),
            4px 4px 0 rgba(0, 0, 0, .3),
            5px 5px 0 rgba(0, 0, 0, .1);
        
        &:nth-child(-n+5) { 
            animation-delay: -5s; 
        }
    }
}

@for $i from 1 to 7 {
    span:nth-child(#{$i}), 
    span:nth-last-child(#{$i}) {
        animation: filterBlur-#{$i} 10s infinite ease-in-out;
    }

    @keyframes filterBlur-#{$i} {
        0% {
            filter: blur(0px) contrast(5);
        }
        50% {
            filter: blur(#{7 - $i}px) contrast(1);
        }
        100% {
            filter: blur(0px) contrast(5);
        }
    }
}
@keyframes rotate {
    0% {
        transform: rotateY(-45deg);
    }
    50% {
        transform: rotateY(45deg);
    }
    100% {
        transform: rotateY(-45deg);
    }
}

简单解析下，这里有几个小技巧，仔细观察我们需要的效果：

1. 第一个字符和最后一个字符在旋转的最左效果和最右效果下分别会离我们最近和最远，它们的效果其实应该是一致的，所以第一个字符和最后一个字符应该统一处理，依次类推，第二个字符和倒数第二字符统一处理，这里可以借助 SASS 利用 :nth-child 和 :nth-last-child 高效编写 CSS 代码

2. 每次有一半是清晰的，一半的是模糊的，需要区分对待，利用 animation-delay 让一半的动画延迟一半进行

3. 可以再配合 text-shadow 让文字更立体点

这样，我们可以最终得到如下效果：

完整的代码，你可以戳这里 -- CSS 灵感 -- 利用 filter:blur 增强文字的 3D 效果

https://csscoco.com/inspiration/#/./filter/use-filter-blur-enhance-text-3d-effect

使用模糊构建落叶效果

合理运用模糊，是能在没有 transform-style: preserve-3d 和 perspective 的加持下，也能构建出不错的 3D 效果。

譬如下面这个落叶效果，就是利用模糊以及简单的层级关系，让整个画面看上去非常的真实：

Falling Leaves