Javascript 将鼠标悬停在上方时变换rotateX（40度）

我试图制作一个面板，当悬停在上面时，它会稍微倾斜。我想我应该使用JQuery，因为我知道它比高级CSS动画更好。我试过很多东西，但都不管用。下面的代码是我目前拥有的代码。如果您告诉我我做错了什么，或者在JQuery中不可能做到，请告诉我如何做到，我将不胜感激

$（文档）.ready（函数（）{
$（'proj1'）。悬停（函数（）{
$（'proj1'）。设置动画({
变换：'rotateX（40度）'
}“慢”）；
});
});
#proj1{
背景图像：url（'http://i.imgur.com/FddIcrz.png');
背景位置：中心；
宽度：300px；
高度：300px；
/*位置：相对位置；
底部：300px*/
左：150px；
边框：2倍纯色灰色；
盒影：3px 3px 5px灰色；
/*-webkit转换：rotateX 4s*/
}
此操作不需要JavaScript。这是一个简单的CSS样式（您应该添加前缀）：

检查小提琴：


不是可设置动画的属性（jquery动画使用基本数字）。jsfiddle设置中也有一些错误阻止了它的运行（比如不打开jquery，只使用proj1作为jquery选择器而不是#proj1）

如果您希望将其关闭并重新启用悬停，请使用

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

如果希望它旋转并停留在那里，可以在hover上添加一个类，如下所示：


更新

看起来你要找的是3d卡片翻转样式，而不是平面旋转。将透视图添加到容器中，如下所示：

与论坛网站不同，我们不会在网站上使用“谢谢”或“感谢任何帮助”或签名。看见“
-webkit转换：rotateX 4s
不起作用，因为
rotateX
不是它自己的CSS属性；它实际上是
transform
。当你做3D的东西时，比如倾斜，你需要使用。然后你可以使用CSS
：hover
而不使用jQuery。我知道你在那里做了什么，但当我说稍微倾斜时，我指的是以3D方式逐渐倾斜。类似这样的
rotateX
与
rotate
不同，它需要一个额外的属性
透视图
。
transform: 'rotateX(40deg)'

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