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>