跳跃的课工场
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>跳跃的课工场</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.container{
width:600px;
height:600px;
border:1px gray solid;
margin:50px auto;
transform-style: preserve-3d;
perspective: 1200px;
}
.ke{
width:300px;
height:437px;
display:block;
margin:50px auto;
background: url(img/ke.jpg) 0px 0px / 300px 437px no-repeat;
box-shadow:-7px 10px 10px #333;
transform: rotateX(60deg) rotateY(3deg) rotateZ(-25deg);
transition: all 1s ease-out;
}
.ke:hover{
transform: rotate3D(0,0,0,0deg);
box-shadow:-100px 100px 10px #fff;
}
</style>
</head>
<body>
<div class="container"><a class="ke" href=""></a></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
