Menu
I need to transform an element with rotation, I want to animate (with transition) the transform but not the rotation.
<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
257
asked Feb 25 '26 22:02
I don't think you can transition a specific property - use animation instead:
animate the translate3d
preserve the rotateZ value while the animation is happening
See demo below:
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
