CSS实现文字的 3D 效果

首先，看看一些有意思的 CSS 3D 文字特效。

要实现文字的 3D 效果，看起来是立体的，通常的方式就是叠加多层。

下面有一些实现一个文字的 3D 效果的方式。

假设我们有如下结构：

<div class="g-container">
    <p>Lorem ipsum</p>
</div>

我们可以通过叠加阴影多层，营造 3D 的感觉，主要是合理控制阴影的距离及颜色，核心 CSS 代码如下：

p {
    text-shadow: 
        4px 4px 0 rgba(0, 0, 0, .8),
        8px 8px 0 rgba(0, 0, 0, .6),
        12px 12px 0 rgba(0, 0, 0, .4),
        16px 16px 0 rgba(0, 0, 0, .2),
        20px 20px 0 rgba(0, 0, 0, .05);
}

这样，就有了基础的 3D 视觉效果。

3D 氖灯文字效果

基于此，我们可以实现一些 3D 文字效果，来看一个 3D 氖灯文字效果，核心就是：

• 利用 text-shadow叠加多层文字阴影
• 利用animation动态改变阴影颜色

  <div class="container">
    <p class="a">CSS 3D</p>
    <p class="b">NEON</p>
    <p class="a">EFFECT</p>
  </div>
  

  核心CSS代码：

  .container {
    transform: rotateX(25deg) rotateY(-25deg);
  }
  .a {
    color: #88e;
    text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112,
        0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c,
        0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;
    animation: pulsea 300ms ease infinite alternate;
  }
  .b {
    color: #f99;
    text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,
        0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66,
        0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;
    animation: pulseb 300ms ease infinite alternate;
  }
  @keyframes pulsea {
    // ... 阴影颜色变化
  }
  @keyframes pulseb {
    // ... 阴影颜色变化
  }
  

  可以得到如下效果：

  .container {
    transform: rotateX(25deg) rotateY(-25deg);
  }
  .a {
    color: #88e;
    text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112,
        0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c,
        0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;
    animation: pulsea 300ms ease infinite alternate;
  }
  .b {
    color: #f99;
    text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112,
        0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66,
        0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;
    animation: pulseb 300ms ease infinite alternate;
  }
  @keyframes pulsea {
    // ... 阴影颜色变化
  }
  @keyframes pulseb {
    // ... 阴影颜色变化
  }
  

  

  利用 CSS 3D 配合 translateZ 实现真正的文字 3D 效果

  当然，上述第一种技巧其实没有运用 CSS 3D。下面我们使用 CSS 3D 配合 translateZ 再进一步。

假设有如下结构：

<div>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>
  <h1>Glowing 3D TEXT</h1>  
</div>

我们通过给父元素 div设置 ‘transform-style: preserve-3d，给每个 <h1> 设定不同的 translateZ()来达到文字的 3D 效果:

div {
    transform-style: preserve-3d;
}
h1:nth-child(2) {
    transform: translateZ(5px);
}
h1:nth-child(3) {
    transform: translateZ(10px);
}
h1:nth-child(4) {
    transform: translateZ(15px);
}
h1:nth-child(5) {
    transform: translateZ(20px);
}
h1:nth-child(6) {
    transform: translateZ(25px);
}
h1:nth-child(7) {
    transform: translateZ(30px);
}
h1:nth-child(8) {
    transform: translateZ(35px);
}
h1:nth-child(9) {
    transform: translateZ(40px);
}
h1:nth-child(10) {
    transform: translateZ(45px);
}

当然，辅助一些旋转，色彩变化，就可以得到更纯粹一些 3D 文字效果：

利用距离、角度及光影构建不一样的 3D 效果

还有一种很有意思的技巧，制作的过程需要比较多的调试。

合理的利用距离、角度及光影构建出不一样的 3D 效果。看看下面这个例子，只是简单是设置了三层字符，让它们在 Z 轴上相距一定的距离。

简单的伪代码如下：

<div>
  <span class='C'>C</span>
  <span class='S'>S</span>
  <span class='S'>S</span>
  <span></span>
  <span class='3'>3</span>
  <span class='D'>D</span>
</div>

$bright : #AFA695;
$gold : #867862;
$dark : #746853;
$duration : 10s;
div {
    perspective: 2000px;
    transform-style: preserve-3d;
    animation: fade $duration infinite;
}
span {
    transform-style: preserve-3d;
    transform: rotateY(25deg);
    animation: rotate $duration infinite ease-in;

    &:after, &:before {
        content: attr(class);
        color: $gold;
        z-index: -1;
        animation: shadow $duration infinite;
    }
    &:after{
        transform: translateZ(-16px);
    }
    &:before {
        transform: translateZ(-8px);
    }
}
@keyframes fade {
    // 透明度变化
}
@keyframes rotate {
    // 字体旋转
}
@keyframes shadow {
       // 字体颜色变化
}

简单捋一下，上述代码的核心就是：

1. 父元素、子元素设置transform-style: preserve-3d
2. 用 span 元素的两个伪元素复制两个相同的字，利用 translateZ() 让它们在 Z 轴间隔一定距离
3. 添加简单的旋转、透明度、字体颜色变化
   可以得到这样一种类似电影开片的标题 3D 动画，其实只有 3 层元素，但是由于角度恰当，视觉上的衔接比较完美，看上去就非常的 3D。

为什么上面说需要合理的利用距离、角度及光影呢？

还是同一个动画效果，如果动画的初始旋转角度设置的稍微大一点，整个效果就会穿帮：

$bright : #AFA695;
$gold : #867862;
$dark : #746853;
$duration : 10s;
div {
    perspective: 2000px;
    transform-style: preserve-3d;
    animation: fade $duration infinite;
}
span {
    transform-style: preserve-3d;
    transform: rotateY(25deg);
    animation: rotate $duration infinite ease-in;

    &:after, &:before {
        content: attr(class);
        color: $gold;
        z-index: -1;
        animation: shadow $duration infinite;
    }
    &:after{
        transform: translateZ(-16px);
    }
    &:before {
        transform: translateZ(-8px);
    }
}
@keyframes fade {
    // 透明度变化
}
@keyframes rotate {
    // 字体旋转
}
@keyframes shadow {
       // 字体颜色变化
}

可以看到，在前几帧，能看出来简单的分层结构。又或者，简单调整一下 perspective，设置父容器的perspective 由 2000px改为500px，穿帮效果更为明显：

也就是说，在恰当的距离，合适的角度，我们仅仅通过很少的元素，就能在视觉上形成比较不错的 3D 效果。

http://www.ddooo.com/softdown/133996.htm