纯CSS视差滚动

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

<div class="box">  <img src="http://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("http://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