I'm looking to apply a transitional animation to an element's transform property without affecting the rotation. Here is the code snippet:
<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>