Javascript 无旋转的变换属性的CSS转换_Javascript_Jquery_Css_Css Transitions

Javascript 无旋转的变换属性的CSS转换

javascript jquery css

Javascript 无旋转的变换属性的CSS转换,javascript,jquery,css,css-transitions,Javascript,Jquery,Css,Css Transitions,我需要用旋转变换一个元素，我想（用转换）变换动画，但不是旋转 <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"><

我需要用旋转变换一个元素，我想（用转换）变换动画，但不是旋转

<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>


.transF{
变换：平移3d（150px，100px，0px）旋转（-50度）；
过渡：变换3s线性；
}
var add=函数（）{
$（“#测试”）.addClass（“transF”）；
}
var remove=function（）{
$（“#测试”）.removeClass（“transF”）；
}
添加
去除
测试

您可以将更改为此

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


.transF
{
转换：translate3d（150px，100px，0px）；
过渡：变换3s线性；
}

只需拆下转子（-50度）

谢谢。

我认为您不能

转换某个特定的属性-请使用动画
：
设置translate3d的动画

在动画发生时保留rotateZ
值
请参见下面的演示：

var add=function（）{
$（“#测试”）.addClass（“transF”）；
}
var remove=function（）{
$（“#测试”）.removeClass（“transF”）；
}
.transF{
变换：平移3d（150px，100px，0px）旋转（-50度）；
动画：翻译3s线性；
}
@关键帧平移{
从{
变换：translate3d（0px，0px，0px）旋转（-50度）；
}
到{
变换：平移3d（150px，100px，0px）旋转（-50度）；
}
}

添加
去除
测试
您的代码是否正常，但我想知道是否有其他解决方案，因为有第三方更改了div translate3d和rotateZ，所以我无法静态执行。我需要旋转它，但没有动画