PROSAGA码农传奇-雾计算/网格计算-JS中元素的视差倾斜

<div class =“post-text”itemprop =“text”>
  <P>
    我认为你想要达到的效果可能更适合于css 3d旋转而不是倾斜。
  </p>
  <P>
    我已经编辑了你的小提琴，但有一些变化。
  </p>
  <P>
    1）设置一个
     <code>
      perspective
    </code>
     在身体上。这将允许
     <code>
      .container
    </code>
     在3d空间中操纵。
  </p>
  <P>
    2）改变了
     <code>
      transform
    </code>
     规则使用
     <code>
      rotate
    </code>
     代替
     <code>
      skew
    </code>
    。
  </p>
  <P>
    3）我已经改变了css以绝对定位4个项目，而不是浮动它们。这意味着他们将适应他们所处的任何窗口的大小。
  </p>
  <P>
    无论如何，希望这应该给你一个开始，以获得你想要的效果。
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“false”>
    <div class =“snippet-code”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          $( "#togglelogs" ).click(function() {
  $( "#logs" ).toggle( 100, function() {
    // Animation complete.
  });
});
$( "body" ).mousemove(function( event ) {
  var pos = "Mouse Position: ";
  var centerX = $( "body" ).width() / 2;
  var centerY = $( "body" ).height() / 2;
  var oppositeposX = event.pageX - centerX;
  var oppositeposY = event.pageY - centerY;
  var offset = "rotateY(" + oppositeposX * .2 + "deg) rotateX(" + (-1 * oppositeposY * .2) + "deg)";
  var skew = {'transform' : offset};
  var oppositeskew = {'transform' : offset};
  
  pos += "x = " + event.pageX + ", " + "y = " + event.pageY;
  $( "#mouselog" ).empty();
  $( "#mouselog" ).append(pos);
  $( "#center" ).empty();
  $( "#center" ).append("Center X = " + centerX + ", Center Y = " + centerY);
  $( "#offset" ).empty();
  $( "#offset" ).append("Offest X = " + oppositeposX + ", Offest Y = " + oppositeposY);
  $(".container").css(skew);
  $( "#css" ).empty();
  $( "#css" ).append(offset);
});
        </code>
      </pre>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          html , body {
  height: 100%;
  min-height:100%;
}

body {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  overflow:hidden;
}
#togglelogs {
  display: block;
  font-size: 10px;
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px;
  border-radius: 0 0 0 4px;
  cursor: pointer;
}
.container {
  position:absolute;
  height: 100%;
  top:0;
  bottom:0;
  left:0;
  right:0;

}
.grid-object {
  width: calc(50% - 2px - 4px);
  height: 50%;
  margin: 1px;
  text-align: center;
  background: #aaa;
  border: 1px solid #222;
  position: absolute;
  left:0;
  top:0;
}
.grid-object + .grid-object {
  left: 50%;
}

.grid-object + .grid-object + .grid-object{
  left: 0;
  top:50%;
}

.grid-object + .grid-object + .grid-object+ .grid-object {
  left: 50%;
  top:50%;
}
#logs {
  position: absolute;
  font-size: 10px;
  background: rgba(0,0,0,.6);
  color: #fff;
  display: block;
  width: 100%;
  top: 0;
  display: none;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
   <div class="grid-object">
     <h3>1</h3>
   </div>
   <div class="grid-object">
     <h3>2</h3>
   </div>
   <div class="grid-object">
     <h3>3</h3>
   </div>
    <div class="grid-object">
     <h3>4</h3>
   </div>
</div>
<div id="logs">
  <div id="mouselog"></div>
  <div id="center"></div>
  <div id="offset"></div>
  <div id="css"></div>
</div>
<div id="togglelogs">Toggle Logs</div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>