SOURCE

console 命令行工具 X clear

                    
>
console
<div class="camera">
  <div class="space">
    <img src="http://www.fjsen.com/yhzh/attachement/jpg/site2/20100628/00219b675fe90d929e2f5a.jpg " width="100%" height="100%" class="item item1">
    <img src="http://www.gjart.cn/managegjart/eWebEditor/UploadFile/200649102434143.jpg " width="100%" height="100%" class="item item2">
    <img src="http://img1.iqilu.com/ed/11/02/22/81/48_110222094302_1.jpg " width="100%" height="100%" class="item item3">
    <img src="http://www.qulishi.com/uploads/yszt/201609/5a/3a/57e4c7e105d58.jpg " width="100%" height="100%" class="item item4">
    <img src="http://www.shicimingju.com/Public/images/zuozhe/81.jpg " width="100%" height="100%" class="item item5">
    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4215930718,1169247798&fm=23&gp=0.jpg " width="100%" height="100%" class="item item6">
.camera {
  width: 200px;
  height: 100px;
  perspective-origin: center center;
  perspective: 1000px;
  margin: 50px 210px;
}

.space {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
/*   animation: rotate-all 20s linear infinite; */
}
  .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: red;
    transform: translateZ(200px);
  }
  
  .item2 {
    transform: rotateY(120deg) translateZ(200px);
  }
  .item3 {
    transform: rotateY(60deg) translateZ(200px);
  }
  .item4 {
    transform: rotateY(180deg) translateZ(200px);
  }
  .item5 {
    transform: rotateY(240deg) translateZ(200px);
  }
  .item6 {
    transform: rotateY(300deg) translateZ(200px);
  }

@keyframes rotate-all {
  100% {
    transform: rotateY(360deg);
  }
}