【CSS3 DEMO】扑克正反面翻牌效果
生活随笔
收集整理的這篇文章主要介紹了
【CSS3 DEMO】扑克正反面翻牌效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在線預(yù)覽地址：http://dtdxrk.github.io/game/css3-demo/drawbox.html
?
用到兩個(gè)屬性：
一個(gè)是動(dòng)畫時(shí)間
transition-duration: 0.8s; -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s;
一個(gè)是3d
transform: rotate3d(0,1,0,-180deg); -webkit-transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d(0,1,0,-180deg);
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{margin:0; padding:0;}.drawbox{width: 200px;height: 200px; position: relative;-webkit-perspective:500px; }.drawbox-front, .drawbox-behand{ position: absolute;top:0;left:0;z-index: 0;-webkit-transition-duration: 0.8s;-webkit-transform: rotate3d(0,1,0,180deg);}.drawbox-front{z-index: 1;-webkit-transform: rotate3d(0,1,0,0deg);}.drawbox:hover .drawbox-front{z-index: 0;-webkit-transform: rotate3d(0,1,0,-180deg);}.drawbox:hover .drawbox-behand{z-index: 1;-webkit-transform: rotate3d(0,1,0,0deg);}</style> </head> <body><div class="drawbox"><div class="drawbox-front"><img width="200" height="200" src="http://car1.autoimg.cn/car/carnews/2015/4/14/d_201504141931123924435110.jpg" alt=""></div><div class="drawbox-behand"><img width="200" height="200" src="http://car1.autoimg.cn/car/carnews/2015/4/14/d_201504142232044255132110.jpg" alt=""></div></div><div class="drawbox"><div class="drawbox-front"><img width="200" height="200" src="http://pic.cnmo-img.com.cn/201501/cnmo200180_03_0107.jpg" alt="" border="0"></div><div class="drawbox-behand"><img width="200" height="200" src="http://pic.cnmo-img.com.cn/201412/ZET2486hp200180news_1224.gif" alt="" border="0"></div></div> </body> </html>
總結(jié)
以上是生活随笔為你收集整理的【CSS3 DEMO】扑克正反面翻牌效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JAVA的extends使用方法
- 下一篇： scala入门-05继承类(extend