纯CSS视差滚动

参考旭哥的：http://www.zhangxinxu.com/wordpress/2015/03/css-only-parallax-effect/
Demo点这里 http://codepen.io/GitKou/pen/YWZvPK?editors=1100

<div class="box">
  "https://img-blog.csdn.net/20160714170115893" alt="" class="curtain">
  <div class="comehere">div>
div>

 * {
   margin: 0;
   padding: 0;
 }

 .box {
   height: 400px;
   position: relative;
   perspective: 1px;
   transform-style: preserve-3d;
   overflow: auto;
   overflow-x: hidden;
 }

 .curtain {
   transform: translate3d(0, 0, -1px) scale(2);
   vertical-align: middle;
 }

 .comehere {
   background: url("https://img-blog.csdn.net/20160714114130582") center center/contain;
   height: 150px;
   width: 150px;
   position: absolute;
   left: 50%;
   top: 50%;
 }

1.原理就是：
利用perspective、translateZ，使得图像在视觉上缩放，然后通过scale将图片缩放至原来的大小，但是对于滚动条来说仍然是相对于scale之后的大小的滚动，和z轴上视觉的大小没有关系。

2.但是这个方法有个问题，必须要让紧贴的外层有滚动条，html或body的滚动条是没有用。那么如何计算box的最大高度呢？ 这里要注意transfrom-origin的问题，不要看translateZ之后的位置，要看只scale之后的位置，小心图片溢出被裁哦~

3.如何计算scale的具体值呢，要让图片回到原来的大小。
借用下别人的图：http://www.w3ctech.com/topic/833

简单的数学，不难计算出 scale的值应该为1 + (translateZ * -1) /perspective