簡單做出HTML5翻頁效果文字特效

之前在網上看到一款比較有新意的HTML5文字特效，文字效果是當鼠標滑過是出現(xiàn)翻開折疊的效果，類似書本翻頁。于是我興致勃勃的點開源碼看了一下，發(fā)現(xiàn)其實實現(xiàn)也挺簡單的，主要利用了CSS3的transform屬性，分別對X軸、Y軸、Z軸進行翻轉，先看一下效果截圖。

? ?? ? 看效果圖這些文字是不是很有立體的感覺，而這個立體的感覺并不是有投影和陰影來實現(xiàn)的，而是通過翻轉。? ? ? ?

接下來我們來看一下源碼。首先是HTML代碼，非常簡單，列出我們需要渲染的文字：

<p class="foo">
  <span class="letter" data-letter="A">A</span>
  <span class="letter" data-letter="B">B</span>
  <span class="letter" data-letter="C">C</span>
  <span class="letter" data-letter="D">D</span>
  <span class="letter" data-letter="E">E</span>
  <span class="letter" data-letter="F">F</span>
  <span class="letter" data-letter="G">G</span>
  <span class="letter" data-letter="H">H</span>
  <span class="letter" data-letter="I">I</span>
  <span class="letter" data-letter="L">L</span>
  <span class="letter" data-letter="M">M</span>
  <span class="letter" data-letter="N">N</span>
  <span class="letter" data-letter="O">O</span>
  <span class="letter" data-letter="P">P</span>
  <span class="letter" data-letter="Q">Q</span>
  <span class="letter" data-letter="R">R</span>
  <span class="letter" data-letter="S">S</span>
  <span class="letter" data-letter="T">T</span>
  <span class="letter" data-letter="U">U</span>
  <span class="letter" data-letter="V">V</span>
  <span class="letter" data-letter="Z">Z</span></p>

接下來是核心CSS3代碼，這里我們略去了控制頁面樣式的CSS代碼，把實現(xiàn)翻頁效果文字的CSS代碼提取出來。

.letter{
  display: inline-block;
  font-weight: 900;
  font-size: 8em;
  margin: 0.2em;
  position: relative;
  color: #00B4F1;
  transform-style: preserve-3d;
  perspective: 400;
  z-index: 1;
}

這樣我們就讓這些字母安安靜靜的排列起來，并有了自己的背景顏色，等待強大的CSS3來渲染。
接下來我們要讓文字在鼠標滑過的時候產生翻轉傾斜的動畫。(#00b4f1是什么顏色?#00b4f1是藍色)

.letter:before, .letter:after{
  position:absolute;
  content: attr(data-letter);
  transform-origin: top left;
  top:0;
  left:0;
}.letter, .letter:before, .letter:after{
  transition: all 0.3s ease-in-out;
}.letter:before{
  color: #fff;
  text-shadow: 
    -1px 0px 1px rgba(255,255,255,.8),
    1px 0px 1px rgba(0,0,0,.8);
  z-index: 3;
  transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
}.letter:after{
  color: rgba(0,0,0,.11);
  z-index:2;
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
}.letter:hover:before{
  color: #fafafa;
  transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
}.letter:hover:after{
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
}

這里我們利用了CSS3的偽類before和after來快速構造兩個相同的字母，然后利用transform屬性的rotateX，rotateY，rotateZ來翻轉，再利用skew來時文字傾斜。

以上就是簡單做出HTML5翻頁效果文字特效的內容，更多相關內容請關注PHP中文網（www.miracleart.cn）！

相關文章：

CSS比較常用的翻轉特效

css實現(xiàn)3D立方體旋轉特效的示例代碼

詳細介紹HTML5 3D衣服搖擺動畫特效如何實現(xiàn)