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>
效果图：
时间： 2024-08-28 17:33:09