以前在網上看到一款比較有新意的HTML5文字特效,文字效果是當鼠標滑過是出現翻開摺疊的效果,相似書本翻頁。因而我興致勃勃的點開源碼看了一下,發現其實實現也挺簡單的,主要利用了CSS3的transform屬性,分別對X軸、Y軸、Z軸進行翻轉,先看一下效果截圖。
php

看效果圖這些文字是否是頗有立體的感受,而這個立體的感受並非有投影和陰影來實現的,而是經過翻轉。 html
DEMO演示效果html5
接下來咱們來看一下源碼。首先是HTML代碼,很是簡單,列出咱們須要渲染的文字:
動畫
- <div 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>
- </div>
複製代碼
接下來是核心CSS3代碼,這裏咱們略去了控制頁面樣式的CSS代碼,把實現翻頁效果文字的CSS代碼提取出來。
spa
- .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來渲染。
接下來咱們要讓文字在鼠標滑過的時候產生翻轉傾斜的動畫。
3d
- .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來時文字傾斜。
code