javascript - 使用 JavaScript 更新转换属性中的 rotate() 属性

Question

如何只更新 transform 属性中的 rotate(19deg) 属性而不影响 translate3d()、translate() 属性？

下面是我的 div 属性。我只想使用 JavaScript 操作 rotate() 属性，以便其他属性保持原样。

transform: translate3d(782px, 312px, 0px) translate(0px, 0px) rotate(19deg) translate(0px, 0px);

因此在使用 JavaScript 更新后，我的 div 转换属性将如下所示:

transform: translate3d(782px, 312px, 0px) translate(0px, 0px) rotate(0deg) translate(0px, 0px);

注意 rotate(0deg)

谢谢大家

Answer 1

如果您的想法是让元素保持在 0 度位置，并且没有通过点击返回到 19 度的选项，您可以选择:

HTML:

<div id="rotateme">
  <p class="clickme">Click Me</p>
</div>

CSS:

#rotateme {
  background-color: blue;
  width: 200px;
  height: 200px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transform: translate3d(382px, 112px, 0px) translate(0px, 0px) rotate(19deg) translate(0px, 0px);
  -ms-transform: translate3d(382px, 112px, 0px) translate(0px, 0px) rotate(19deg) translate(0px, 0px);
  transform: translate3d(382px, 112px, 0px) translate(0px, 0px) rotate(19deg) translate(0px, 0px);
}

.clickme {
  text-align: center;
  padding-top: 80px;
  color: #fff;
  font-size: 20px;
}

jQuery:

$('.clickme').click(function() {
  $("#rotateme").css("-webkit-transform", "translate3d(382px, 112px, 0px) translate(0px, 0px) rotate(0deg) translate(0px, 0px)");
  $("#rotateme").css("transform", "translate3d(382px, 112px, 0px) translate(0px, 0px) rotate(0deg) translate(0px, 0px)");
  $("#rotateme").css("-ms-transform", "translate3d(382px, 112px, 0px) translate(0px, 0px) rotate(0deg) translate(0px, 0px)");
});

我没有使用您要求的确切值，因为它会将框推到可见区域下方(至少在我当前的 Codepen 设置下)，但您可以看到哪个需要更改。此外，我使用过渡来实现平滑旋转和前缀，因此它适用于所有现代浏览器。

Codepen 示例可用 here .