3d名片 – 有爱前端

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>3d名片</title> <style type="text/css"> body { background: #edf2f4; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100vh; font-family: "microsoft yahei"; } .card { color: #08c; pointer-events: none; -webkit-transform: translateZ(0); transform: translateZ(0); padding: 30px; background: white; background: url(http://info.happigo.com/2010/1027/2cfa7d123588.jpg); background-size: cover; border-radius: 5px; width: 400px; height: 200px; margin: auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); position: relative; } .card:after { content: " "; position: absolute; width: 100%; height: 10px; border-radius: 50%; left: 0; bottom: -50px; box-shadow: 0 30px 20px rgba(0, 0, 0, 0.3); } .card .card-content { margin: auto; text-align: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .card h1 { -webkit-transform: translateZ(100px); transform: translateZ(100px); } .card p { -webkit-transform: translateZ(50px); transform: translateZ(50px); display: block; } .card p.related { -webkit-transform: translateZ(80px); transform: translateZ(80px); font-style: italic; } .card a { color: #08c;; pointer-events: auto; } </style> </head> <body> <div class="card"> <div class="card-content"> <h1>UI前端</h1> <p><small>by <a href="http://www.gzui.net/" target="_blank">蚂蚁</a></small></p> <p class="related"><strong>网址: </strong><a href="http://www.gzui.net/" target="_blank">gzui.net</a></p> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> // why it doesn't work on firefox? var card = $(".card"); $(document).on("mousemove",function(e) { var ax = -($(window).innerWidth()/2- e.pageX)/20; var ay = ($(window).innerHeight()/2- e.pageY)/10; card.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)"); }); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 3d名片