版权声明：非经本人同意，请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/82793337
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
body{background: #000;perspective: 1000px;}
#box{width:250px;height: 300px;border-radius: 5px;margin: 100px auto;position: relative;}
#box>div{width: 100%;height: 100%;text-align: center;position: absolute;transition: all 1s;}
span{line-height: 250px;font-size: 60px;font-weight: bold;}
#box1{background: greenyellow;}
#box2{background: orange;}
#box3{background: purple;}
#box>div:nth-of-type(1){transform: rotateX(-20deg) translatez(0);opacity: .5;}
#box>div:nth-of-type(2){transform: rotateX(-20deg) translatez(100px);opacity: .8;}
#box>div:nth-of-type(3){transform: rotateX(-20deg) translatez(200px);opacity: 1;}
</style>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById("box");
setInterval(
function(){
box.appendChild(box.firstElementChild)
}
,2000)
}
</script>
<body>
<div id="box">
<div id="box1">
<span>1</span>
</div>
<div id="box2">
<span>2</span>
</div>
<div id="box3">
<span>3</span>
</div>
</div>
</body>
</html>