1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 a{ 8 display: block; 9 width: 200px; 10 height: 200px; 11 overflow: hidden; 12 padding: 20px; 13 } 14 15 img{ 16 width: 100%; 17 height: 100%; 18 transition: transform 1s; 19 20 } 21 22 img:hover{ 23 transform: scale(1.2); 24 } 25 26 .test1{ 27 width: 100%; 28 height: 100%; 29 border-top: 1px solid; 30 border-bottom: 1px solid; 31 transform:rotateY(180deg); 32 float: left; 33 -webkit-backface-visibility:hidden; 34 -moz-backface-visibility:hidden; 35 -ms-backface-visibility:hidden; 36 transition: transform 1s; 37 } 38 39 .test2{ 40 width: 100%; 41 height: 100%; 42 border-left: 1px solid; 43 border-right: 1px solid; 44 transform:rotateX(180deg); 45 -webkit-backface-visibility:hidden; 46 -moz-backface-visibility:hidden; 47 -ms-backface-visibility:hidden; 48 transition: transform 1s; 49 } 50 51 a:hover .test1{ 52 transform:rotateY(0deg); 53 } 54 55 a:hover .test2{ 56 transform:rotateX(0deg); 57 } 58 </style> 59 </head> 60 61 <body> 62 63 <a href="http://www.baidu.com"> 64 <div class="test1"></div> 65 <div class="test2"></div> 66 </a> 67 </body> 68 </html>
效果图：
