CSS3 3d旋转 悬浮效果,在线可运行编辑代码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>BFW 3D DEMO</title> <style> body { border: none; margin: 0; background-color: #0D3462; } li { list-style: none; } ul { margin: 0; padding: 0; } .contentbox { width: 1000px; margin: auto; margin-top: 2em; clear: left; } .qcontainer { -webkit-perspective: 400; -moz-perspective: 400; float: left; width: 220px; margin-right: 20px; } .film { width: 100%; height: 165px; -webkit-transform-style: preserve-3d; -webkit-transition: 1.5s; -moz-transform-style: preserve-3d; -moz-transition: 1.5s; } .qcontainer:hover .film { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } .face { position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } .face img { width: 220px; } .face h3 { color: white; text-align: center; } .back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); background: -webkit-gradient(linear, left top, left bottom, from(#39afff), to(#0086e1)); background: -moz-linear-gradient(top, #39afff, #0086e1); width: 220px; height: 165px; } .foot { text-align: center; color: #fff; position: fixed; bottom: 20px; left: 50%; margin-left: -126px; font-size: 12px; font-family: "微软雅黑" ; } </style> </head> <body> <div class="contentbox"> <div class="qcontainer"> <div class="film"> <div class="face front"> <img src="http://bfw.wiki/static/Blog/image/bfwdemo.png"> </div> <div class="face back"> <h3>BFW01</h3> </div> </div> </div> <div class="qcontainer"> <div class="film"> <div class="face front"> <img src="http://bfw.wiki/static/Blog/image/bfwdemo.png"> </div> <div class="face back"> <h3>BFW02</h3> </div> </div> </div> <div class="qcontainer"> <div class="film"> <div class="face front"> <img src="http://bfw.wiki/static/Blog/image/bfwdemo.png"> </div> <div class="face back"> <h3>BFW03</h3> </div> </div> </div> <div class="qcontainer"> <div class="film"> <div class="face front"> <img src="http://bfw.wiki/static/Blog/image/bfwdemo.png"> </div> <div class="face back"> <h3>BFW04</h3> </div> </div> </div> </div> </body> </html>
网友评论0