使用JavaScript更新transform屬性內的rotate（）屬性

如何僅更新transform屬性內的rotate(19deg)屬性而不影響translate3d(),translate()屬性？使用JavaScript更新transform屬性內的rotate（）屬性

下面是我的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)

謝謝你們

來源

2016-03-07 Cecil Theodore

您需要做這樣的事情在[這個答案]（http://stackoverflow.com/questions/30010523/add-a-transform-value-to-the-current-transforms-that-are-already-上的元件/ 30010571＃30010571）。基本上提取當前的變換值，使用正則表達式進行檢查並根據需要進行替換。 – Harry

何時會發生此更改，請點擊？要麼？ –

@哈利是的，我確實想到這一點，但希望有一個更簡單的方法！ –

如果你的想法是離開元素

：在沒有其他選擇，通過點擊返回返回19deg 0deg位置，你可以與去

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。

來源

2016-03-07 14:38:17

感謝嘗試，但這種實現的問題是它不能解釋這個事實的翻譯，翻譯的屬性總是會發生變化。 –

你的意思是點擊後，它會回到原來的狀態？ –

對不起，如果我最初不清楚。但translate3d（782px，312px，0px）translate（0px，0px）rotate（0deg）translate（0px，0px）都可以改變。所以我會與一個不會有靜態translate3d（）和transform（）值 –

使用JavaScript更新transform屬性內的rotate（）屬性

回答

相關問題