Question

我想用翻转动画更改悬停时的一些文字。数字＆＃34; 1＆＃34;将显示并悬停数字水平翻转成为＆＃34; 0＆＃34;。当鼠标悬停时，该数字将返回＆＃34; 1＆＃34;

我不能成功使它变得流畅。

你做的任何帮助，脚本？

提前致谢！

这是我的尝试。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("p").hover(function(){
    $("p").text('0');
    });
</script>

＆＃13;

p{
    font-size:45px;
    display:inline-block;
}

p:hover{
    transition: all ease-in 1s 0s;
    -webkit-transition: all ease-in 1s 0s;
    -webkit-transform: rotatex(180deg);
    transform: rotatex(180deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>1</p>

＆＃13;

Answer 1

隐藏背面可见性，使用两个元素而不是一个，位置：绝对它们在彼此之上，将它们放在包含元素中 - 当包含元素悬停时，触发你的翻转过渡。

阅读本文：

http://davidwalsh.name/css-flip

在悬停Jquery / css3时使用翻转动画更改文本

1 个答案: