3D旋转照抄也错 ,哪位大神帮看看哪里错了??

<!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>
    <div>
   <div>1</div> 
    
   <div>2</div> 

</div>  
 


</div>
















</body>
</html>