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/

Answer 2

这不需要JavaScript。这个简单的CSS样式工作（你应该添加前缀）：

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

检查小提琴：

https://jsfiddle.net/lmgonzalves/tf5xd7px/2/

悬停时转换rotateX（40deg）

2 个答案: