.login-box {
width:600px
margin:0 auto;
}
.login-box li {
float:left;
margin-right:15px;
position:relative;
cursor:pointer;
list-style:none;
}
.weibo {
position:absolute;
width:150px;
height:150px;
background:#fff;
right:-65px;
z-index:10;
cursor:pointer;
-moz-transform:rotateY(270deg);
-ms-transform:rotateY(270deg);
-o-transform:rotateY(270deg);
-webkit-transform:rotateY(270deg);
transform:rotateY(270deg);
-moz-transition:all 0.3s ease-in-out 0s;
-webkit-transition:all 0.3s ease-in-out 0s;
transition:all 0.3s ease-in-out 0s;
}
.weibo-list:hover .weibo {
-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}
.weibo img,.weixin img {
width:100%;
height:auto;
display:block;
}
.weibo:after {
content:"";
position:absolute;
border-width:6px;
border-style:dashed dashed dashed solid;
border-color:transparent transparent red transparent;
display:block;
right:68px;
top:-11px;
}
.weixin {
position:absolute;
width:150px;
height:150px;
background:#fff;
right:-65px;
z-index:10;
cursor:pointer;
-moz-transform:rotateY(270deg);
-ms-transform:rotateY(270deg);
-o-transform:rotateY(270deg);
-webkit-transform:rotateY(270deg);
transform:rotateY(270deg);
-moz-transition:all 0.3s ease-in-out 0s;
-webkit-transition:all 0.3s ease-in-out 0s;
transition:all 0.3s ease-in-out 0s;
}
.weixin-list:hover .weixin {
-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
-o-transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}
.weixin:after {
content:"";
position:absolute;
border-width:6px;
border-style:dashed dashed dashed solid;
border-color:transparent transparent red transparent;
display:block;
right:68px;
top:-11px;
}
<img src="http://www.jq22.com/img/cs/500x500-1.png">
换成二维码的图片