使用transform制作书本翻页效果
生活随笔
收集整理的這篇文章主要介紹了
使用transform制作书本翻页效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
transform
- transform屬于CSS屬性
- Transform屬性應用于元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。
在網頁中需要制作一些有立體感的3d效果，比如書本翻頁
tansform中有一個rotate旋轉屬性
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
| rotateX(angle) | 定義沿著 X 軸的 3D 旋轉。 |
| rotateY(angle) | 定義沿著 Y 軸的 3D 旋轉。 |
| rotateZ(angle) | 定義沿著 Z 軸的 3D 旋轉。 |
書本的翻頁主要圍繞書本軸線進行左右翻動書本
例子為書本從合起狀態到打開狀態
首先定義一本書本div
效果：
在此div中設置好perspective，這是用戶相對于屏幕的遠近距離，之后翻頁效果出現時perspective值越近，翻轉效果越明顯。
在outbookPage中編寫要進行旋轉的子div元素
<style>.outbookPage {margin: 100px auto;width: 586px;height: 632px;perspective: 2000px;background:gray ;box-shadow: 0 0 10px #999;}.innerBookPage {width: 100%;height: 100%;background-color: #333333;/* 向外面旋轉 */transform: rotateY(-40deg); transform-origin: 0 0;font-size: 40px;text-align: center;color: white;z-index: 5;} </style> <div class="outbookPage"><div class="innerBookPage">封面</div> </div>效果： 當前為靜態效果，如果想要制作完整的動畫翻頁效果可以使用animation，但是需要注意的是animation只能支持IE10+。
tansform:rotateY( 定義的角度 ) 代表讓div元素繞Y軸進行3d旋轉。 rotateY也只支持IE10+
在封面div旋轉到背面之后可以使用backface-visibility: hidden; 對背面進行隱藏。
此時封面旋轉到一般就消失了
為了讓封面旋轉到一半后消失出現第一頁，可以給封面div添加兄弟元素，即第一頁的div。
注意此處第一頁的div需要進行180度翻轉，這樣旋轉之后才能正向顯示。
同樣需要進行背部隱藏： backface-visibility: hidden;
完整代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">.outbookPage {margin: 100px auto;width: 586px;height: 632px;perspective: 2000px;background:gray ;background-position: 100% 0%;box-shadow: 0 0 10px #999;}.innerBookPage {width: 100%;height: 100%;background-color: #333333;/* 向外面旋轉 */transform: rotateY(-20deg); transform-origin: 0 0;animation: openbook 3s forwards;font-size: 40px;text-align: center;color: white;backface-visibility: hidden;z-index: 5;}.innerfirstPages {width: 100%;height: 100%;background: burlywood;background-size: 100% 100%;position: absolute;top: 0;left: -100%;font-size: 40px;text-align: center;animation: openbook2 3s forwards;transform: rotateY(180deg);transform-origin: 100% 0;backface-visibility: hidden;}@keyframes openbook{0%{transform: rotateY(0deg) scaleX(1);}100%{transform: rotateY(-180deg) scaleX(1);}}@keyframes openbook2{0%{transform: rotateY(180deg) scaleX(1);}100%{transform: rotateY(0deg) scaleX(1);box-shadow: 0 0 10px #999;}}</style></head><body><div class="outbookPage"><div class="innerBookPage">封面</div><div class="innerfirstPages">第一頁內容1111111111111222222222222222</div></div></body> </html>效果：
總結
以上是生活随笔為你收集整理的使用transform制作书本翻页效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于Linux的C++轻量级web服务器
- 下一篇： CSV乱码 - UTF-8 Unicod