Apple TV的海报视差效果

 查看演示  website  立即下载

HTML如下：

<div class="poster">
  <div class="shine"></div>
  <div class="layer-1"></div>
  <div class="layer-2"></div>
  <div class="layer-3"></div>
  <div class="layer-4"></div>
  <div class="layer-5"></div>
</div>

body {
    background: linear-gradient(to bottom, #f6f7fc 0%,#d5e1e8 40%);
    transform-style: preserve-3d;
    transform: perspective(800px);
}
.poster {
    width: 320px;
    height: 500px;
    position: absolute;
    top: 50%; left: 50%;
    margin: -250px 0 0 -160px;
    border-radius: 5px;
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.4);
    overflow:hidden;
}

PREVIOUS:
NEXT:
某宁易购前台高仿
轮播滚动左右切换