使用 JavaScript 更新转换属性中的 rotate(） 属性

Update the rotate() property within a transform attribute using JavaScript

本文关键字：属性 rotate 更新 转换 使用 JavaScript      更新时间：2023-09-26

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

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

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

因此，在使用 JavaScript 更新后，我的divs transform 属性将如下所示：

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

请注意rotate(0deg)

谢谢大家

如果您的想法是将元素保留在 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;
}

j查询：

$('.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 设置下），但您可以看到哪一个需要更改。此外，我正在使用过渡来实现平滑旋转和前缀，因此它可以在所有现代浏览器上运行。

此处提供了代码笔示例。

相关文章：