我可以向div添加额外的转换吗？

汤玛士

因此，如果div已经具有转换，我可以添加到现有的旋转中吗？像这样的东西：

<div style="width: 200px; height: 200px; background-color: red; transform: rotateX(90deg) rotateY(10deg)" id="myDiv"></div>
<script>
document.addEventListener("click",function(){
document.getElementById("myDiv").style.transformRotateX += 10deg;
})
</script>

特里

您可以做的就是依靠velocity.js，它使您可以累积地修改单个变换属性。这样做的好处是，Velocity.js依靠JavaScript而不是jQuery来制作动画，从而使其效率更高并防止布局颠簸。

var ele = document.getElementById("myDiv");

// Establish initial transformation onload
Velocity(
  ele,
  {
    rotateX: '90deg',
    rotateY: '10deg'
  },
  {
    duration: 0
  });

// Progressively manipulate rotateX property upon each click
document.addEventListener("click",function(){
  Velocity(
    ele,
    {
      translateZ: 0, // Force HA by animating a 3D property
      rotateX: "+=10deg"
    },
    {
      duration: 0
    }
  );
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<div style="width: 200px; height: 200px; background-color: red;" id="myDiv"></div>

当然，如果您希望依靠jQuery和/或Zepto来简化元素选择，那也是可行的：

$(function() {
  // Establish initial transformation onload
  $('#myDiv').velocity({
    rotateX: '90deg',
    rotateY: '10deg'
  }, {
    duration: 0;
  });
  
  // Progressively manipulate rotateX property upon each click
  $('#myDiv').click(function() {
    $(this).velocity({
      rotateX: '+=10deg'
    }, {
      duration: 0
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<div style="width: 200px; height: 200px; background-color: red;" id="myDiv"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。