不帶旋轉的變換屬性的CSS過渡

我需要使用旋轉來變換元素，我想使用變換而不是旋轉對變換進行動畫處理（使用過渡）。不帶旋轉的變換屬性的CSS過渡

<html> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <style> 
    .transF{ 
     transform:translate3d(150px, 100px, 0px) rotateZ(-50deg); 
     transition : transform 3s linear; 
     } 
    </style> 
    <script> 
     var add = function(){ 
     $("#test").addClass("transF"); 
     } 
     var remove = function(){ 
     $("#test").removeClass("transF"); 
     } 
    </script> 
</head> 

<body> 
    <button onclick="add()">Add</button> 
    <button onclick="remove()">Remove</button> 
    <div id="test">test</div> 
</body> 

</html>

Plunkr link

來源

2017-02-03 swahi-ems

這是如此奇怪......我愛它！ :) – user7393973

你可以改變這一種。

<style> 
    .transF 
    { 
    transform:translate3d(150px, 100px, 0px); 
    transition : transform 3s linear; 
    } 
</style>

只需卸下rotateZ（-50deg）。

謝謝。

來源

2017-02-03 11:05:25

我需要旋轉它，但沒有動畫 –

我不認爲你可以transition一個特定屬性 - 使用animation代替：

動畫的translate3d
保留rotateZ值，而動畫正在發生

請參見下面的演示：

var add = function() { 
 
    $("#test").addClass("transF"); 
 
} 
 
var remove = function() { 
 
    $("#test").removeClass("transF"); 
 
}

.transF { 
 
    transform: translate3d(150px, 100px, 0px) rotateZ(-50deg); 
 
    animation: translate 3s linear; 
 
} 
 
@keyframes translate { 
 
    from { 
 
    transform: translate3d(0px, 0px, 0px) rotateZ(-50deg); 
 
    } 
 
    to { 
 
    transform: translate3d(150px, 100px, 0px) rotateZ(-50deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<button onclick="add()">Add</button> 
 
<button onclick="remove()">Remove</button> 
 
<div id="test">test</div>

來源

2017-02-03 11:08:52 kukkuz

您的代碼工作，但我想知道是否有另一種解決方案，因爲有第三方更改div translate3d和rotateZ，所以我不能靜態執行它 –

不帶旋轉的變換屬性的CSS過渡

回答

相關問題