如何只更新 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 设置下),但您可以看到哪一个需要更改。此外,我正在使用过渡来实现平滑旋转和前缀,因此它可以在所有现代浏览器上运行。
此处提供了代码笔示例。