<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>打开盒子3D效果</title>
<style type="text/css">
#content{
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
}
#face1,#face2{
width: 300px;
height: 300px;
background: url(images/musicb.jpg) no-repeat;
position: absolute;
top: 0px;
left: 0px;
border: #666 solid 1px;
border-radius: 50%;
}
#face2{
background: url(images/musicl.jpg) no-repeat;
}
#content:hover #face2{
transform: rotateY(80deg);
transform-origin:-5% 100%;
transition: all 5s ease-out,
}
</style>
</head>
<body>
<div id="content">
<div id="face1"></div>
<div id="face2"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>打开盒子3D效果</title>
<style type="text/css">
#content{
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
}
#face1,#face2{
width: 300px;
height: 300px;
background: url(images/musicb.jpg) no-repeat;
position: absolute;
top: 0px;
left: 0px;
border: #666 solid 1px;
border-radius: 50%;
}
#face2{
background: url(images/musicl.jpg) no-repeat;
}
#content:hover #face2{
transform: rotateY(80deg);
transform-origin:-5% 100%;
transition: all 5s ease-out,
}
</style>
</head>
<body>
<div id="content">
<div id="face1"></div>
<div id="face2"></div>
</div>
</body>
</html>
1068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
