<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wallet</title>
<style type="text/css">
body {
background:#f14849;
}
#content {
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
}
#face1, #face2 {
width: 300px;
height: 300px;
background:url(images/baidu_bg.png) left bottom no-repeat;
position: absolute;
top: 0px;
transition:all 1s;
backface-visibility:hidden; /*转过去以后隐藏*/
}
#content:hover #face1 {
transform:rotateY(-180deg);
}
#content:hover #face2 {
transform:rotateY(0deg);
}
#face1 {
z-index: 6;
}
#face2 {
background-position: -305px bottom;/*css中spirits技术*/
transform:rotateY(-180deg);
}
</style>
</head>
<body>
<div id="content">
<div id="face1"></div>
<div id="face2"></div>
</div>
</body>
</html>
7871
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
