css anim perspective-origin - FACESOHO知行者

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
<title>小鸟启蒙(facesoho.com)</title> 
<style>
#div1 {
    position:relative;
    margin:auto;
    height:150px;
    width:250px;
    padding:10px;
    border:1px solid black;
    /* Chrome, Safari, Opera */
    -webkit-perspective:125px;
    -webkit-animation:mymove 5s infinite;
    /* Standard syntax */
    perspective:125px;
    animation:mymove 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    50% {-webkit-perspective-origin:10px 50%;}
}

/* Standard syntax */
@keyframes mymove {
    50% {perspective-origin:10px 50%;}
}

#div2 {
    padding:50px;
    position:absolute;
    border:1px solid black;
    background-color:coral;
    -webkit-transform:rotateX(45deg); /* Chrome, Safari, Opera */
    transform:rotateX(45deg);
}
</style>
</head>
<body>

<p>perspective-origin  属性支持动画效果。</p>
<p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>

<div id="div1">DIV1
  <div id="div2">Think that you are looking down on a wall. See what happens when you gradually change the perspective!</div>
</div>

</body>
</html>