最近群里有个有趣的问题。大家都在讨论能否用CSS3D实现下面的效果：这里的核心难点是如何用CSS实现一个三维数字？CSS能做到吗？实现起来不是特别容易，但如果我们只在一定角度内使用视觉蒙眼法，还是可以完美还原以上效果的。利用距离、角度和光影来构建不同的3D效果是一种非常有趣的技巧。神奇的CSS3D动画|仅使用CSS如何制作出令人惊叹的动画？我们介绍过，当然制作过程需要更多的调试。合理运用距离、角度和光影，打造不同的3D效果。看下面的例子，简单的设置了三层字符，让它们在Z轴上隔开一定的距离。简单的伪代码如下：
CSS3D
$bright:#AFA695;$gold:#867862;$dark:#746853;$duration:10s;div{perspective:2000px;变换样式：保留3d；动画：淡入淡出$duration无限；}span{变换样式：preserve-3d；变换：旋转Y（25度）；动画：旋转$duration无限缓入；&:after,&:before{content:attr(class);颜色：$金色；z-指数：-1；动画：阴影$duration无限；}&:after{变换：translateZ(-16px);}&:before{变换：translateZ(-8px);}}@keyframesfade{//透明度变化}@keyframesrotate{//字体旋转}@keyframesshadow{//字体颜色变化}简笔画，上面代码的核心是：父元素，子元素设置transform-style：保留-3dspan元素的两个伪元素复制两个相同的字符，并使用translateZ()使它们在Z轴上保持一定距离。加上简单的旋转、透明度、字体颜色的变化，就可以得到这样一个类似于电影开场的标题3D动画。其实元素只有3层，但是由于角度合适，视觉衔接比较完美，看起来很有3D感。为什么说要合理利用距离、角度、光影呢？还是一样的动画效果，如果把动画的初始旋转角度设置的稍微大一点，整个效果就打散了：可以看到在前几帧，可以看到一个简单的分层结构。或者，简单的调整一下视角，将父容器的视角从2000px设置为500px，穿刺效果更明显：也就是说，在合适的距离，合适的角度，我们可以在视觉上形成一个比较不错的3D影响。上面的完整代码可以点击这里：CSS灵感——3D文字外观动画就是基于这个技巧，我们简单修改一下，我们先替换文字效果：
2023
这样，我们会得到这样的效果：哇，有点像。接下来，我们需要制作节日文字效果。首先，随便在网上找找烟花gif图，可能是这样的：我们使用background-clip:text给三层文字加上类似的效果。核心伪代码如下：span{position:relative;变换样式：保留3d；颜色：透明；背景：url(xxx.gif)；背景剪辑：文本；&:after,&:before{位置：绝对；内容：属性（类）；颜色：透明；背景：网址（xxx.gif）；背景剪辑：文本；}&:before{变换：translateZ(-12px);}&:after{transform:translateZ(-6px);}}这样，我们就得到了烟花效果的Text，还有一点3D效果：还剩下最后一步，如何制作倒影效果呢？方法有很多种，比较方便的是使用webkit-box-reflect元素。只需要一行代码：div{//...-webkit-box-reflect:below-6vwlinear-gradient(transparent20%,rgba(255,255,255,.6));}当然，如果两个伪-elements如果生成的字符形成的3D文字视觉粗细不理想，也可以同步调整两个伪元素的transform:translateZ(-6px)的值。经过一些调整，我们简单的复现如题图所示。20233D文字动画效果展示到这里：完整代码，大家可以点这里：CodePenDemo--CSS3D2023终于搞定了，本文到此结束，一个很有意思的小技巧，希望本文能对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS，持续更新。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。
