<!DOCTYPE HTML>
<html>
<html>
<head>
<meta charset="UTF-8">
<title>3D</title>
</head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.light{
margin-left:200px;
margin-top:200px;
width:310px;
height:100px;
position:absolute;
perspective:500px;
}
.light .stage{
position:relative;
width:310px;
height:100px;
transform-style:perserve-3d;
-webkit-transition: all 0.6s;
}
.light .stage .image1{
width:310px;
height:100px;
background:red;
position:absolute;
-webkit-transform:translateZ(50px);
-webkit-transition: all 0.6s;
}
.light .stage .image2{
width:310px;
height:100px;
background:black;
position:absolute;
-webkit-transition: all 0.6s;
-webkit-transform: rotateX(-90deg) translateZ(50px) ;
}
.light .stage:hover{
-webkit-transform: rotateX(90deg);
}
</style>
<body>
<div class="light">
<div class="stage">
<div class="image1"> 1</div>
<div class="image2">2</div>
</div>
</div>
</body>
</html>MR帽子先生
慕田峪1377340
五趾的鱼
MR帽子先生