簡單的一個3d翻轉的動畫特效：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .main-img{width: 800px; margin: 50px auto 0; overflow: hidden;} .main-img .img-item{width: 180px; height: 250px; margin: 0 30px 30px 0; float: left;} .main-img .img-item .img-box{width: 180px; height: 250px;} .main-img .img-item .img-box img{width: 180px; height: 250px;} /**/ .main-img .img-item.item1{} .main-img .img-item.item1 .img-box{transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .main-img .img-item.item1:hover .img-box{transform: perspective(1000px) rotateY(45deg);} /**/ .main-img .img-item.item2{position: relative;} .main-img .img-item.item2 .img-box{backface-visibility: hidden; position: absolute; top: 0; left: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .main-img .img-item.item2 .img-box:last-child{z-index: 2;} .main-img .img-item.item2 .img-box:first-child{transform: rotateY(180deg);} .main-img .img-item.item2:hover .img-box:first-child{transform: rotateY(0deg);} .main-img .img-item.item2:hover .img-box:last-child{transform: rotateY(-180deg);} /**/ .flip-container{ perspective: 1000px; /* 設置透視點 */ } .flipper{ width: 180px; height: 250px; transition: 0.6s; /* 設置過渡特效 */ transform-style: preserve-3d; /* 開啓3D環境 */ position: relative; } .front,.back{width: 180px; height: 250px; backface-visibility: hidden; position: absolute; top: 0; left: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .front img,.back img{width: 180px; height: 250px;} .front{z-index: 2;} .back{transform: roateY(180deg);} .flipper:hover .front{transform: rotateY(-180deg);} .flipper:hover .back{transform: rotateY(0deg);} </style> </head> <body> <div class="main-img"> <div class="img-item item1"> <div class="img-box"><img src="images/111.jpg"></div> </div> <div class="img-item item2"> <div class="img-box"><img src="images/111.jpg"></div> <div class="img-box"><img src="images/222.jpg"></div> </div> </div> <div class="flip-container"> <div class="flipper"> <div class="front"><img src="images/111.jpg"></div> <div class="back"><img src="images/222.jpg"></div> </div> </div> </body> </html>
打完收工！