本文將從比較多的方面詳細闡述如何利用 CSS 3D 的特性,，實現各類有趣,、酷炫的動畫效果。認真讀完,，你將會收獲到：
CSS 3D 基礎知識
本文默認讀者掌握一定的 CSS 3D 知識，能夠繪制初步的 3D 動畫效果,。當然這里會再簡單過一下 CSS 3D 的基礎知識,。
使用 transform-style 啟用 3D 模式
要利用 CSS3 實現 3D 的效果，最主要的就是借助 transform-style 屬性,。transform-style 只有兩個值可以選擇：
// 語法：
transform-style: flat|preserve-3d;
transform-style: flat; // 默認,，子元素將不保留其 3D 位置
transform-style: preserve-3d; // 子元素將保留其 3D 位置。
當我們指定一個容器的 transform-style 的屬性值為 preserve-3d 時,，容器的后代元素便會具有 3D 效果,，這樣說有點抽象,，也就是當前父容器設置了 preserve-3d 值后，它的子元素就可以相對于父元素所在的平面,，進行 3D 變形操作,。
利用 perspective & perspective-origin 設置 3D視距，實現透視/景深效果
perspective 為一個元素設置三維透視的距離,，僅作用于元素的后代,，而不是其元素本身。
簡單來說,，當元素沒有設置 perspective 時，也就是當 perspective:none/0 時所有后代元素被壓縮在同一個二維平面上,，不存在景深的效果,。
而如果設置 perspective 后，將會看到三維的效果,。
// 語法
perspective: number|none;
// 語法
perspective-origin: x-axis y-axis;
// x-axis : 定義該視圖在 x 軸上的位置,。默認值：50%
// y-axis : 定義該視圖在 y 軸上的位置。默認值：50%
而 perspective-origin 表示 3D 元素透視視角的基點位置,，默認的透視視角中心在容器是 perspective 所在的元素,，而不是他的后代元素的中點，也就是 perspective-origin: 50% 50%,。
通過繪制 Webpack Logo 熟悉 CSS 3D
對于初次接觸 CSS 3D 的同學而言,，可以通過繪制正方體快速熟悉語法，了解規(guī)則,。
而 Webpack 的 Logo,，正是由 2 個 立方體組成：
以其中一個正方體而言，實現它其實非常容易：
- 一個正方體由 6 個面組成,，所以首先設定一個父元素 div,，然后這個 div 再包含 6 個子 div，同時,，父元素設置
transform-style: preserve-3d,； - 6 個子元素，依次首先旋轉不同角度,，再通過
translateZ 位移正方體長度的一半距離即可 - 父元素可以通過
transform 和 perspective 調整視覺角度
以一個正方體為例子,，簡單的偽代碼如下：
<ul class="cube-inner">
<li class="top"></li>
<li class="bottom"></li>
<li class="front"></li>
<li class="back"></li>
<li class="right"></li>
<li class="left"></li>
</ul>
.cube {
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform-origin: 50px 50px;
transform: rotateX(-33.5deg) rotateY(45deg);
li {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: rgba(141, 214, 249);
border: 1px solid #fff;
}
.top {
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
transform: rotateX(-90deg) translateZ(50px);
}
.front {
transform: translateZ(50px);
}
.back {
transform: rotateX(-180deg) translateZ(50px);
}
.left {
transform: rotateY(-90deg) translateZ(50px);
}
.right {
transform: rotateY(90deg) translateZ(50px);
}
}
疊加兩個，調整顏色和透明度,，我們可以非常輕松的實現 Webpack 的 LOGO：
當然,，這里的 LOGO 為了保證每條線條視覺上的一致性，其實是沒有設置景深效果 perspective 的,，我們可以嘗試給頂層父容器添加一下如下代碼,，通過 transform 和 perspective 調整視覺角度,，設置景深效果：
.father {
transform-style: preserve-3d;
perspective: 200px;
transform: rotateX(10deg);
}
就可以得到真正的 3D 效果，感受很不一樣：
完整的代碼,，你可以戳這里：CodePen Demo -- Webpack LOGO[1]
OK,，熱身完畢，接下來,，讓我們插上想象的翅膀,，走進 CSS 3D 的世界。
實現文字的 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 氖燈文字效果，核心就是：
- 利用 animation 動態(tài)改變陰影顏色
<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 {
// ... 陰影顏色變化
}
可以得到如下效果：
完整的代碼,，你可以猛擊這里 CSS 靈感 -- 使用陰影實現文字的 3D 氖燈效果[2]
利用 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 文字效果：
完整的代碼，你可以猛擊這里 CSS 靈感 -- 3D 光影變換文字效果[3]
利用距離,、角度及光影構建不一樣的 3D 效果
還有一種很有意思的技巧,，制作的過程需要比較多的調試。
,。
