如何只更新 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)
谢谢大家
最佳答案
如果您的想法是让元素保持在 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 .
关于javascript - 使用 JavaScript 更新转换属性中的 rotate() 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35845222/