<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>hover 3d</title> <style type="text/css"> li{ list-style: none; float: left; width: 260px; height: 320px; margin-left: 52px; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; } li a { display: block; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; } li a .template-container { width: 100%; height: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; } li a:hover .template-container { -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } li .content { position: absolute; width: 100%; height: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; } li .content img { width: 260px; height: 260px; border-radius: 4px; } li .content .qr-code-container { position: relative; width: 260px; height: 260px; background: rgba(255,251,249,.7); border-top-left-radius: 4px; border-top-right-radius: 4px; } li .content .qr-code { position: absolute; top: 20px; left: 20px; padding: 10px; width: 200px; height: 200px; background: #fff; border-radius: 4px; } li .content .qr-code img{width: 200px;height: 200px;} li .cover { -webkit-transform: translateZ(130px); transform: translateZ(130px); } li .hover { border: 1px solid #ff6b00; border-radius: 4px; -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transform: rotateY(-270deg) translateX(130px); transform: rotateY(-270deg) translateX(130px); } li .hover .name { background: #fff; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } li .name { margin: 0; position: absolute; bottom: 0; width: 100%; height: 60px; line-height: 60px; text-align: center; color: #272727; font-size: 18px; } li:nth-child(4n+1) { margin-left: 2px; } </style> </head> <body> <ul> <li> <a href="http://www.gzui.net/" target="_blank" class="case-inner"> <div class="template-container"> <div class="content visible cover"> <img src="http://img2.xcabc.com/201710/11/20171011051712174411.png" class="cover"> <p class="name">活动报名招聘精品</p> </div> <div class="content hidden hover"> <div class="qr-code-container"> <div class="qr-code"> <img src="http://192.168.1.198/publicity/images/ztcc.png" alt=""> </div> </div> <p class="name">活动报名招聘精品</p> </div> </div> </a> </li> </ul> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » hover 3d 喜欢 (0)or分享 (0)
