Question

我正在尝试制作一个带有动态透视和旋转的css 3D变换菜单，jquery和变换原点只是为了探索戏剧效果，遗憾的是我不确定我失败的地方

$(document).ready(function() {
  $('#mainWrapper').on("mousemove", function(event) {
    var menuWidth = document.getElementById('mainMenu').offsetWidth;
    var x = event.pageX * 100 / menuWidth;
    var origin = Math.floor(x) + "%;"
    var angle = (x * -30 / 100) + 15;
    $("#mainMenu").css({
      "-webkit-transform-origin": origin,
      "-moz-transform-origin": origin,
      "-ms-transform-origin": origin,
      "transform-origin": origin,
      "transform": " perspective(" + menuWidth / 6 + "px)  rotateY(" + angle + "deg)"
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainWrapper">
  <nav id="mainMenu" class="mainMenu">
    <div class="row">
      <div class="cell round"></div>
      <div class="cell round"></div>
      <div class="cell round"></div>
      <div class="cell round"></div>
      <div class="cell round"></div>
    </div>
    <div class="row">
      <div class="cell round"></div>
      <div class="cell round"></div>
      <div class="cell round"></div>
      <div class="cell round"></div>
      <div class="cell round"></div>
    </div>
    <div class="row">
      <div class="cell round"></div>
      <div class="cell round"></div>
      <div class="cell round"></div>
      <div class="cell round"></div>
      <div class="cell round"></div>
    </div>
  </nav>
</div>

Answer 1

这是一个简单的语法错误。

var origin = Math.floor(x) + "%;"

应该是

var origin = Math.floor(x) + "%"。

在$.css()函数中，您没有直接在string属性中设置style，但函数会为您执行此操作。 Math.floor(x) + "%"是该函数的参数。当函数设置style属性字符串时，该函数将添加分号。

当您修改的css属性不适用于html元素的style属性时，检查属性中的语法错误，然后检查应用它们的函数。将所有值或对象打印到与操作相关的控制台。

Answer 2

使用 jQuery transformOrigin 函数时需要 transform-origin 而不是 .css

JjQuery＆amp;变换原点

2 个答案: