在旋转卡的过程中，文本被翻转了，有什么方法可以修复它。我考虑过使用reverse（）方法，但是文本是上下颠倒的。请帮我。我使用了带有两个函数的jQuery hover（）方法。
<!doctype html>
<html>
<head>
<style>
.card{
background-color:lightblue;
color:green;
line-height:70px;
text-align:center;
padding:10px;
width:100px;
height:100px;
transition: all 0.6s ease;
transform-style:preserve-3d;
border-radius:10px;
border:2px solid gray;
}
.card:hover{
transform:rotateZ(180deg);
background-color:orange;
color:purple;
direction:rtl;
}
.card-container{
perspective:1000px;
padding:10px;
}
</style>
</head>
<body>
<div class='container'>
<div class='card-container'>
<div class='card'>
<div class='front'>TEXT</div>
<div class='back'></div>
</div>
</div>
</div>
<script src='jquery.js'></script>
<script>
$(function(){
$('ul.parent >li').hover(function(){
$(this).find('ul.child').show(200);
},function(){
$(this).find('ul.child').hide(200);
});
});
//card hover and rotate
$('.card').hover(
function(){
$(this).find('.front').text('');
$(this).find('.back').text(('HELLO')); //hello is reversed when flipped <-----
},
function(){
$(this).find('.back').text('');
$(this).find('.front').text('TEXT');
});
</script>
</body>
</html>
最佳答案
将负旋转应用于文本，
看起来好像文字没有旋转
.card:hover .front{
transform:rotateZ(-180deg);
}
.card .front{
transition: all 0.6s ease;
}
http://jsfiddle.net/FPCRb/2241/（对小提琴小提琴Bhushan Kawadkar表示敬意）
注意，旋转是通过CSS代码完成的，不需要JS / jquery。
鼠标悬停在卡上时，
.card:hover规则将应用转换规则。 rotateZ(180deg)会将整个元素旋转180度，包括文本内容。为了阻止这种情况的发生，我们可以对文本元素进行负旋转。这可以通过添加.card:hover .front规则来实现。