字母翻牌效果

这篇教学会单纯透过“虚拟元素”和“属性值”来简化程序码，搭配“em”相对长度单位，让翻牌效果适应各种大小文字，并透过 3D 转换、变形、动画样式等互相搭配，产生与众不同的 CSS 制作字母翻牌效果。

快速导览：

使用虚拟元素产生字母和阴影

使用 3D 变形产生翻转效果

字母翻牌效果

CSS 教学 - CSS 字母翻牌效果

使用虚拟元素产生字母和阴影

字母翻牌效果要产生“翻转的字母”和“下方阴影”，为了让程序码更为简洁 ( 只写一次字母 )，可以透过虚拟元素选择器 ::before 和 ::after 来读取元素属性，读取属性后根据默认的排列顺序，将 ::before 当作阴影，将 ::after 作为字母，详细说明可以参考范例的注解。

虚拟元素是 CSS 里唯一可以使用 attr 读取元素属性 ( 目前部分浏览器已经让全样式支援 attr )，并透过 content 显示属性内容的选择器，参考：虚拟元素选择器 ( 伪元素 )、content 搭配 attr()。

线上展示：https://codepen.io/oxxo/pen/mydqrjM

<!-- HTML 程式碼 -->
<h2 text="A"></h2>
<h2 text="B"></h2>
<h2 text="C"></h2>

<!-- CSS 程式碼 -->
<style>
  body {
    background: #888;
    padding: 50px;
  }
  h2 {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 150px;     /* 文字尺寸會繼承到子元素和虛擬元素 */
    line-height: 0.8;     /* 文字行高會繼承到子元素和虛擬元素 */
  }
  h2::before, h2::after {
    content: attr(text);  /* 讀取並顯示元素的 text 屬性 */
    top: 0;
  }
  h2::before {
    position: relative;  /* 因為元素本身沒有內容，使用 relative 讓虛擬元素撐開元素 */
    left: 5px;           /* 陰影稍微位移 */
    color: #000;         /* 陰影顏色黑色 */
  }
  h2::after {
    position: absolute;  /* 因為翻轉時會改變尺寸，所以使用 absolute 使其不會影響尺寸，並蓋在陰影上方 */
    left: 0;
    color: #fff;         /* 文字白色 */
  }
</style>

CSS 教学 - CSS 字母翻牌效果 - 使用虚拟元素产生字母和阴影

使用 3D 变形产生翻转效果

如果将刚刚的虚拟元素 ::after 套用 CSS 的 transform，让字母围绕 Y 轴旋转后，就能做出“字母翻转”的效果，实际操作时必须搭配 3D 变换转用的样式 perspective、perspective-origin、transform-style 和 transform-origin，才能做到逼真的翻转效果，详细说明可参考下方范例注解。

参考：transform 转换函数、transform 3D 转换与透视

线上展示：https://codepen.io/oxxo/pen/wBvPzxj

<!-- HTML 程式碼 -->
<!-- 注意有額外使用 class 為 camera 的 div 包覆 h2-->
<div class="camera"><h2 text="A"></h2></div>
<div class="camera"><h2 text="B"></h2></div>
<div class="camera"><h2 text="C"></h2></div>

<!-- CSS 程式碼 -->
<style>
  body {
    background: #888;
    padding: 50px;
  }
  .camera {     
    display: inline-block;        /* 幫助排版，看自己需求也可以移除這行 */
    font-size: 150px;             /* 字體大小移動到這裡，為了讓 perspective:3em 有參考依據 */
    line-height: 0.8;             /* 行高跟隨字體大小移動到這邊 */
    perspective-origin: 50% 50%;  /* 攝影機中心點對齊中心 */
    perspective: 3em;             /* 攝影機透視距離為 3em = 150px x 3 */
  }
  h2 {
    position: relative;
    margin: 0;
    padding: 0;
    cursor: pointer;              /* 改成手形游標，讓 hover 更明顯 */
    transform-style: preserve-3d; /* 使用 preserve-3d 模試，將子元素擺放在同一個 3D 空間裡 */
  }
  h2::before, h2::after {
    content: attr(text);
    top: 0;
    transform-origin: 0 0 0;      /* 轉換中心點為左上角 */
    pointer-events: none;         /* 禁止與滑鼠互動，因為 3D 旋轉時的尺寸空間會變大 */
  }
  h2::before {
    position: relative;
    left: 5px;
    color: #000;
  }
  h2::after {
    position: absolute;
    left: 0;
    color: #fff;
    transform: rotateY(-5deg);    /* 預設稍微翻 -5deg */
    transition: .3s;              /* 加上轉場時間 */
  }
  h2:hover::after {
    color: #eee;
    transform: rotateY(-30deg);   /* hover 發生時翻轉 -30deg */
  }
</style>

CSS 教学 - CSS 字母翻牌效果 - 使用 3D 变形产生翻转效果