旋转卡片时文本会翻转，有什么办法可以解决这个问题。我想过使用 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 的 js-fiddle)
请注意，旋转是通过 CSS 代码完成的，不需要 JS/jquery。
.card:hover 规则将在您的鼠标悬停在卡片上时应用转换规则。 rotateZ(180deg) 会将整个元素旋转 180 度，包括文本内容。为了阻止这种情况发生，我们可以对文本元素仅应用负旋转。这是通过添加 .card:hover .front 规则实现的。
关于jquery - 如何避免卡片旋转时字符串被翻转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42026761/