Question

我正在开发一个可以调整div的CSS转换属性的项目，我注意到某些转换组合无法正常工作。我猜它与变换的顺序有关，但我不确定。我也想知道有一种简单的方法可以让我的项目与任何变换组合一起工作吗？

这是代码：

function changeDiv(e) {
  var x = e.clientX; // Get mouse x and y
  var y = e.clientY;
  if (/tr/.test($("#mouseX").val())) { // Find the suitable unit using a regex on value of corresponding select tag
    var xUnit = "px"
  } else if (/(sk|ro)/.test($("#mouseX").val())) {
    var xUnit = "deg"
  } else {
    var xUnit = ""
  }
  if (/tr/.test($("#mouseY").val())) {
    var yUnit = "px"
  } else if (/(sk|ro)/.test($("#mouseX").val())) {
    var yUnit = "deg"
  } else {
    var yUnit = ""
  }
  $("#tilt").css("transform", $("#mouseX").val() + "(" + ((x - (window.innerWidth / 2)) / 2) + xUnit + " ) " + $("#mouseY").val() + "(" + ((y - (window.innerHeight / 2)) / 2) + yUnit + " )");
  // Change the div css
}

#tilt {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  text-align: center;
  background-color: red;
}

<!DOCTYPE html>
<html onmousemove="changeDiv(event)">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
  Mouse X:
  <select id="mouseX">
    <option value="translateX">translateX()</option>
    <option value="translateY">translateY()</option>
    <option value="scaleX">scaleX()</option>
    <option value="scaleY">scaleY()</option>
    <option value="rotateX">rotateX()</option>
    <option value="rotateY">rotateY()</option>
    <option value="rotateZ">rotateZ()</option>
    <option value="skewX">skewX()</option>
    <option value="skewY">skewY()</option>
  </select>
  Mouse Y:
  <select id="mouseY">
    <option value="translateX">translateX()</option>
    <option value="translateY" selected>translateY()</option>
    <option value="scaleX">scaleX()</option>
    <option value="scaleY">scaleY()</option>
    <option value="rotateX">rotateX()</option>
    <option value="rotateY">rotateY()</option>
    <option value="rotateZ">rotateZ()</option>
    <option value="skewX">skewX()</option>
    <option value="skewY">skewY()</option>
  </select>
  <div id="tilt"></div>
</body>

</html>

该项目也在我的网站here上。

表格的组合工作为here。

CSS转换属性无法正常使用多个转换

0 个答案: