简单技巧,不废话看效果
贴代码
HTML
<div class="main01 main011"><a href="#"><img src="test.png"/></a></div>
css
.main01{position: absolute;width: 260px;height: 160px;top: 50%;margin-top: -120px;border-radius:5px ;text-align: center;-webkit-transition: all .1s ease;-moz-transition: all .1s ease;transition: all .1s ease;outline: none;}.main01 img{border-radius: 5px;width: 100%;}.main01:hover img{transform: scale(1.05);-ms-transform: scale(1.05);overflow: hidden;}.main011{margin-left: 105px;background-color: #28B779;box-shadow: 0px 16px 0px rgba(31, 152, 98, 1), 0px 9px 25px rgba(0, 0, 0, .8);}.main011:hover{background-color: #4D4D4D\0/;margin-top: -110px;box-shadow: 0px 2px 0px rgba(31, 152, 98, 1), 0px 3px 6px rgba(0, 0, 0, 1);}
CSS实现点击3D效果
原文地址:https://www.cnblogs.com/huixin520/p/8466697.html