我正在尝试制作一个面板,当鼠标悬停在上面时,它会稍微倾斜。我认为我应该使用 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>
最佳答案
transform: 'rotateX(40deg)'
不是动画属性(jquery 动画适用于基本数字)。 jsfiddle 设置也有一些错误阻止了它的运行(比如没有打开 jquery 并且只使用 proj1 作为你的 jquery 选择器而不是 #proj1)。
如果您想要将其转动并在悬停时将其重新转动,请使用
#proj1:hover {
transform: rotateX(40deg);
}
如果你想让它旋转并停留在那里,你可以在悬停时添加一个类,如下所示:
https://jsfiddle.net/tf5xd7px/3/
更新
看起来您正在寻找 3d 卡片翻转样式,而不是平面旋转样式。像这样向您的容器添加透视图:
关于javascript - 悬停时变换 rotateX(40deg),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30443786/