CSS3鼠标悬浮图片前后翻转
分类:实例代码
CSS3鼠标悬浮图片前后翻转属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,实现了鼠标悬浮图片出现前后翻转效果。
比较常见于网站广告,下面就是一段这样类似的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> body { background: #eeeeee; } h3 { color: red; text-align: center; font: bold 18px/1.5 "microsoft yahei"; } .card-container { position: relative; width: 1100px; margin: 0 auto; } .card { margin-right: 15px; width: 200px; height: 380px; float: left; } .card .font,.card .back { position: absolute; transition: transform 0.4s; transform-style: preserve-3d; backface-visibility: hidden; } .card .font { transform: rotateY( 0deg); } .card .back { transform: rotateY( -180deg); } .card:hover .font { transform: rotateY( 180deg); } .card:hover .back { transform: rotateY( 0deg); } .card2,.card4 { margin-top: 20px; } </style> </head> <body> <h3>鼠标移动到卡片上试试</h3> <div class="card-container"> <div class="card card1"> <a href="#" class="back"><img src="demo/CSS/img/card6-back.png" /></a> <a href="#" class="font"><img src="demo/CSS/img/card6.png" /></a> </div> <div class="card card2"> <a href="#" class="back"><img src="demo/CSS/img/card7-back.png" /></a> <a href="#" class="font"><img src="demo/CSS/img/card7.png" /></a> </div> <div class="card card3"> <a href="#" class="back"><img src="demo/CSS/img/card8-back.png" /></a> <a href="#" class="font"><img src="demo/CSS/img/card8.png" /></a> </div> <div class="card card4"> <a href="#" class="back"><img src="demo/CSS/img/card9-back.png" /></a> <a href="#" class="font"><img src="demo/CSS/img/card9.png" /></a> </div> <div class="card card5"> <a href="#" class="back"><img src="demo/CSS/img/card10-back.png" /></a> <a href="#" class="font"><img src="demo/CSS/img/card10.png" /></a> </div> </div> </body> </html>
鼠标悬浮,实现图片翻转效果。
相关阅读:
(1).相对定位参阅CSS position:relative 相对定位一章节。
(2).绝对定位参阅CSS position:absolute 绝对定位一章节。
(3).transition参阅CSS3 transition一章节。
(4).transform-style参阅CSS3 transform-style一章节。
CSS3鼠标悬浮图片前后翻转,这样的场景在实际项目中还是用的比较多的,关于CSS3鼠标悬浮图片前后翻转就介绍到这了。