純粋なCSS視差スクロール

旭さんのを参考にしてくださいhttp://www.zhangxinxu.com/wordpress/2015/03/css-only-parallax-effect/ ここにしてください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.しかし、この方法には問題があります。密着した外層にスクロールバーがあるようにしなければなりません。では、boxの最大高さはどう計算しますか？ここではtransfrom-origginの問題に注意してください。translateZの後の位置を見ないでください。scaleの後の位置だけを見てください。画像が溢れてカットされているので注意してください。
3.scaleの具体的な値はどのように計算しますか？写真を元の大きさに戻します。他の人の図を借りる:http://www.w3ctech.com/topic/833
簡単な数学は、scaleの値を計算するのに難しくないです。1+(translateZ*-1)/perspectiveです。