javascript - 悬停时变换 rotateX(40deg)

Question

我正在尝试制作一个面板，当鼠标悬停在上面时，它会稍微倾斜。我认为我应该使用 JQuery，因为我比高级 CSS 动画更了解它。我已经尝试了很多东西，但都行不通。下面的代码是我目前拥有的。如果您告诉我我做错了什么，或者如果在 JQuery 中无法做到，我将不胜感激，请告诉我我该怎么做。

https://jsfiddle.net/tf5xd7px/

$(document).ready(function() {
  $('proj1').hover(function() {
    $('proj1').animate({
      transform: 'rotateX(40deg)'
    }, 'slow');
  });
});

#proj1 {
  background-image: url('http://i.imgur.com/FddIcrz.png');
  background-position: center;
  width: 300px;
  height: 300px;
  /*position:relative;
      bottom:300px;*/
  left: 150px;
  border: 2px solid gray;
  box-shadow: 3px 3px 5px gray;
  /*-webkit-transition: rotateX 4s;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='projects'>
  <div id='proj1'>
  </div>
</div>

Answer 1

transform: 'rotateX(40deg)'

不是动画属性(jquery 动画适用于基本数字)。 jsfiddle 设置也有一些错误阻止了它的运行(比如没有打开 jquery 并且只使用 proj1 作为你的 jquery 选择器而不是 #proj1)。

如果您想要将其转动并在悬停时将其重新转动，请使用

#proj1:hover {
  transform: rotateX(40deg);
}

如果你想让它旋转并停留在那里，你可以在悬停时添加一个类，如下所示:

https://jsfiddle.net/tf5xd7px/3/

更新

看起来您正在寻找 3d 卡片翻转样式，而不是平面旋转样式。像这样向您的容器添加透视图:

https://jsfiddle.net/tf5xd7px/4/