JQuery & 转换原点 [关闭]答案

【问题标题】：JjQuery & transform-origin [closed]JQuery & 转换原点 [关闭]
【发布时间】：2017-07-23 05:59:27
【问题描述】：

我正在尝试制作一个 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>

【问题讨论】：

你想达到什么目的？转换发生时没有错误。你在哪里失败了？
你好据说...我的“原点”变量必须有我的光标 x 的百分比值...所以，如果我的光标在左侧，则转换原点必须在左侧屏幕等。但似乎原点总是在中心正如你所说的那样显然不会发生错误，但是与我的属性“transform”不同，“transform-origin”属性永远不会嵌入到我的标签的样式属性中，我不知道为什么.. .
下面的答案对你有帮助吗？

标签： jquery css transform

【解决方案1】：

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

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

应该是

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：