把網頁上的文字變成酷炫的 3D 風格，還能製作旋轉動效，有了 ztext.js，只需要幾行程式碼。

ztext 能做什麼

ztext.js 是一個能把常規的平面文字變成 3D 樣式的前端開原始碼庫，讓開發者能透過非常簡單的 api 創造出酷炫的 3D 文字效果。配合 CSS 動畫，可以實現驚豔酷炫的互動效果。

ztext 官網文件截圖

ztext.js 庫的特點輕量無依賴，支援原生 javascript 和在 Vue / React 中安裝使用效能強勁，相容性強。基於 CSS 的 transform-style 屬性實現，超過98%使用者的瀏覽器都支援，而且用於 CSS transform 的動畫效能很高功能強大，適用範圍廣。不僅適用於任何中西文字型，還支援圖片/ svg / Emoji 表情符號

支援圖片/svg/表情符號

開發上手體驗

在開發 PC 端展示型的頁面或應用時，運用合適的特效，能讓呈現效果印象深刻。把 banner 上的標題變成 3D，搭配設計精美的元素，是一個很見的需求。而常規的方法是使用 canvas，前端需要載入幾M大小的 WebGL 庫，折騰數小時才能實現。

ztext.js 就是一個適用於這樣場景的 js 庫，壓縮版本大小僅3.8kb，api 也非常簡單，而且官網有詳細的程式碼例子，甚至不需要有太紮實的程式碼基礎，copy 改改就能用，快速建立酷炫的 3D 文字特效。配合滑鼠懸停的互動，著實能為產品增色不少。

ztext.js 實現 3D 文字的原理

ztext.js 並沒有引入真正的第三方 3D 庫來實現三維檢視，而是透過從 HTML 元素建立圖層，來給人一種立體的錯覺，基於 CSS 的 transform-style 屬性來還原 3D ，視覺效果非常好，作為使用者沒有發現任何區別，而且很容易結合 CSS3 動畫來使用，能夠隨時調整角度，非常喜歡這種簡單酷炫的方式。

免費開源說明

ztext.js 基於 MIT 開源協議在 Github 上開源，任何人都可免費下載用在自己的專案，包括商業用途。