CSS3——制作圖片翻頁的小動畫
阿新 • • 發佈：2018-06-11
動畫 意思 樣式 con tez ati -c all spa
覺得還挺有意思的嘻嘻~
這裏有一個問題要註意一下，圖片反轉過程中可能會遇到一種如下所示的跳變bug：
這玩意一出來嚇我一大跳，顯然這種用戶體驗是很不好的，解決方法：
在.pic, .info{...}這個樣式中添加 transform:perspective(800px) rotateY(0deg) 這句話就好啦！要給他一個初始的位置，這樣他就不會亂飛啦~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片翻面</title> <style type="text/css"> .con{ width:249px; height:299px; margin:100px auto 0; position:relative; transform-style: preserve-3d; } .pic, .info{ width:249px; height:299px; position:absolute; left:0; top:0; /*隱藏背面圖片*/ backface-visibility: hidden; transition: all 1s ease; /*防止跳變bug*/ transform:perspective(800px) rotateY(0deg) ; } .info{ width:249px; height:299px; background-color: rgb(80,143,22); text-align: center; line-height: 299px; transform: translateZ(2px) rotateY(180deg); } .con:hover .pic{ transform: perspective(800px) rotateY(180deg); } .con:hover .info{ transform: perspective(800px) rotateY(0deg); } </style> </head> <body> <div class="con"> <div class="pic"><img src="images/login.jpg" alt="小鴨子"></div> <div class="info">圖片文字說明</div> </div> </body> </html>
效果圖：
CSS3——制作圖片翻頁的小動畫