.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">
换成二维码的图片