CSS代码:
*{padding: 0;margin: 0;} .container{ 90%;padding: 5%;height: 12rem;display: flex;justify-content:space-around; } .container > div{ 160px;height: 160px;} img{ 100%;height: 100%;display: block;overflow: hidden;} a{transition:all 1s ease;display: block;height: 100%;} span{color: #fff; text-align: center;line-height: 160px;} /*div1*/ .div1 span{display:none;height:100%;background-color:blue;transform:rotateX(-180deg);} .a1:hover img{display: none;} .a1:hover span{display: block;} .a1:hover{transform:rotateX(180deg) scale(.9,.9 );} /*div2*/ .div2 span{display:none;height:100%;background-color:blue;transform:rotateY(-180deg);} .a2:hover img{display: none;} .a2:hover span{display: block;} .a2:hover{transform:rotateY(180deg) scale(.9,.9 );} /*div3*/ .div3{perspective:1000px;} .div3 a{transform-style:preserve-3d;transition:all .5s ease;} .div3 span{display:block;height: 160px;background-color:blue;transform-origin:50% 0;transform:rotateX(-90deg); } .a3:hover{transform:rotateX(90deg) translate3d(0,-80px,80px);} /*div4*/ .div4{perspective:1000px;} .div4 a{transform-style:preserve-3d;transition:all .5s ease;} .div4 span{display:block;height: 160px;background-color:blue;transform-origin:50% 100%;transform:translateY(-320px) rotateX(90deg);} .a4:hover{transform:rotateX(-90deg) translate3d(0,80px,80px);} /*div5*/ .div5{perspective:1000px;} .div5 a{transform-style:preserve-3d;transition:all .5s ease;} .div5 span{display:block;height: 160px;background-color:blue;transform-origin:0 50%;transform:translate(100%,-100%) rotateY(90deg); } .a5:hover{transform:rotateY(-90deg) translate3d(-80px,0,80px);} /*div5*/ .div6{perspective:1000px;} .div6 a{transform-style:preserve-3d;transition:all .5s ease;} .div6 span{display:block;height: 160px;background-color:blue;transform-origin:100% 50%;transform:translate(-100%,-100%) rotateY(-90deg); } .a6:hover{transform:rotateY(90deg) translate3d(80px,0,80px);}
HTML:
<section class="container"> <div class="div1"> <a href="###" class="a1"> <img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png"> <span>轴向二维翻转</span> </a> </div> <div class="div2"> <a href="###" class="a2"> <img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png"> <span>横向向二维翻转</span> </a> </div> <div class="div3"> <a href="###" class="a3"> <img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png"> <span>3D上翻转</span> </a> </div> </section> <section class='container'> <div class="div4"> <a href="###" class="a4"> <img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png"> <span>3D下翻转</span> </a> </div> <div class="div5"> <a href="###" class="a5"> <img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png"> <span>3D右翻转</span> </a> </div> <div class="div6"> <a href="###" class="a6"> <img src="http://img.woyaogexing.com/2016/05/03/bb771ee6c49a26d9!200x200.png"> <span>3D左翻转</span> </a> </div> </section>