Question

我需要使用旋转变换元素，我想为变换设置动画（使用过渡）而不是旋转。

<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

Answer 1

我认为您不能transition 特定的属性 - 请改为使用animation：

动画 translate3d
在动画发生时保留rotateZ值

见下面的演示：

＆＃13;

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

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

Answer 2

您可以更改为此。

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

只需删除rotateZ（-50deg）。

谢谢。

转换属性的CSS转换没有旋转

2 个答案: