實例詳解css3特效之3D翻牌效果
- WBOY轉載
- 2016-05-16 12:03:255315瀏覽
這篇文章主要介紹了css3特效之3d翻牌效果，有一定的參考價值，感興趣的小伙伴可以參考一下，希望對你有所幫助！
最近一直在學css3，發現他真的是越來越牛逼。現在的css3已經不在是以前的css了，它能做出的功能效果是我們沒辦法想的了。它可以實現flash，可以製作一些js能做出來的效果,還可以寫出ps做出來的一些漸變啊圓角啊陰影啊什麼的效果，如此之炫的它，我相信已經有很多人對它做更深的研究了吧，哈哈，今天我也在小小的研究了下它，主要是關於它的一些3d效果，對於3d本人一直都不是不清不楚的，今天有時間就剛好好好學習下。
所謂的3d翻牌效果，其實就是兩張圖片，一張在前，一張在後，當前面的那張發生旋轉後，轉到一定角度時後面的圖片就會跟著它的步伐一起旋轉，只是一個旋轉到看不見，而一個剛要轉的我們看的見。是不是很心急，那就快來跟我一起學習吧，哈哈~@@@
首先，我們在html中有一個佈局：
<p class="outer"> <p class="p1"></p> <p class="p2"></p> </p>
不要小看外面那個p，它可是本次內容必不可少的呢，沒了它，後面的效果就沒法實現了呢!局布好了，接下來就要開始搞樣式了。最先要搞的肯定是外面的哈，給它一個width,height,大少各位大神自己定吧，小妹我這就先給它定個200*200吧。外面的搞定了，裡面的也要開始了，這裡都是給200*200。此時在瀏覽器中一看發現p1和p2是上下顯示的，一個上一個下，這就對了，要知道p是塊元素，它要佔據一整行的呢，但這對我們之前說的前後一定是有矛盾的，不要急，給它一個絕對定位position: absolute;這樣兩個p的中心就重合啦。為了區別兩個p,這裡我們要分別給它們不一樣的背景色。前期準備工作都差不搞定了，接下來我們來看看怎麼樣實現效果吧！
我們是要實現翻牌效果，一聽就知道一定是要有旋轉的，這就要用到css3裡的新屬性transform:rotatey(?deg);有人有可能會問為什麼是rotatey呢，這你就不知道了吧，翻牌，當然是沿著y軸轉啊，哈哈！所以當滑鼠移到p上時我們就要讓它實現旋轉效果，那麼此時外層p的用處就來啦，不管用哪個小p都無法讓它們同時發生旋轉，除非我們的滑鼠是點在外面那個p上，於是就有這個代碼了，
.outer:hover .p1{
transform:rotatey(-180deg);
}
.outer:hover .p2{
transform:rotatey(0deg);
}旋轉是有了，可是沒有任何過渡效果的旋轉看起來是很難看的，所以在這裡，我們要給它們一個過渡效果，就要用到css3裡的新屬性transition:all 2s;此處的all是它所有的效果都過渡。講到這裡我們其實一直都沒處理一件事，那就是怎麼讓當前面的旋轉到後面，後面的緊跟其後出現， 這就是backface-visibility:hidden;一個在圖片變換裡很重要的一個屬性，它的意思是當圖片轉到顯示器看不見的地方就消失了。就是說本來是正面的， 我們能看麼到，但是當它沿著y軸轉180度後我們就不能看到它了，如果不加這個屬性我們是能看到旋轉後的反圖片的，加了它就看不到了。所以我們要把這個屬性加到兩個小p上。而且為了達到這個效果，我們在開始的時候還得讓兩個小p一個沒有旋轉，我們能看到，另一個也就是在背後的那個放180度，這樣當第一個p 開始旋轉後我們就不會立即看到第二個p，而是等它旋轉到看不到的地方，第二個p 才會出現。具體程式碼如下：
<html><head>
<title>3D翻牌效果 </title>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.outer{
width: 510px;
height: 340px;
border: 1px red solid;
margin: 0 auto;
}
.outer p{
width:510px;
height: 340px;
position: absolute;
transform-style: preserve-3d;
backface-visibility:hidden;
transition:all 2s;
}
.p1{
background: url("images/1.jpg");
transform:rotateY(0);
}
.p2{
background: url("images/2.jpg") no-repeat;
transform:rotateY(-180deg);
}
.outer:hover .p1{
transform:rotateY(-180deg);
}
.outer:hover .p2{
transform:rotateY(0deg);
}
</style></head><body><p class="outer">
<p class="p1"></p>
<p class="p2"></p></p></body></html>以上就是這篇文章的主要內容，希望能夠幫助大家。
【相關教學推薦】
1. css影片教學
2. css線上手冊
3. bootstrap教學