使用 JavaScript 更新变换属性中的 rotate() 属性答案

【问题标题】：Update the rotate() property within a transform attribute using JavaScript使用 JavaScript 更新变换属性中的 rotate() 属性
【发布时间】：2016-03-07 22:38:17
【问题描述】：

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

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

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

所以在使用 JavaScript 更新后，我的 divs 转换属性将如下所示：

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

注意rotate(0deg)

谢谢大家

【问题讨论】：

您需要在this answer 中执行类似操作。基本上提取当前的变换值，用正则表达式检查并酌情替换。
什么时候会发生这种变化，点击？还是？
@Harry 是的，我确实想到了这一点，但希望有一种更简单的方法！
@BrunoKos 是一个点击事件
@CecilTheodore：我认为没有更简单的方法。事实上，如果原始变换是通过 CSS 设置的（并且我们必须使用 getComputedStyle 来获取原始变换值），它会变得更加棘手，因为它会返回一个需要重构的矩阵等价物。

标签： javascript css transform

【解决方案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。

【讨论】：

感谢您的尝试，但此实现的问题在于它没有考虑到 translate、translate 属性将始终更改的事实。
你的意思是点击后会恢复原状？
对不起，如果我最初不清楚。但是 translate3d(782px, 312px, 0px) translate(0px, 0px) rotate(0deg) translate(0px, 0px) 都可以改变。所以我将与一个没有静态 translate3d() 和 transform() 值的 div 交互
那么你将如何改变这些值呢？
div 可以使用外部源进行旋转，从而改变 translate3d() 和变换属性