Question

在旋转卡片时，文字会翻转，有没有办法解决它。我想过使用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>

Answer 1

对文字应用否定轮播，看起来文字不会旋转

.card:hover .front{
  transform:rotateZ(-180deg);
}

.card .front{
  transition: all 0.6s ease;
}

http://jsfiddle.net/FPCRb/2241/（js-fiddle的荣誉为Bhushan Kawadkar）

请注意，旋转是通过CSS代码完成的，不需要JS / jquery。

一旦您的鼠标悬停在卡上，.card:hover规则将应用转换规则。 rotateZ(180deg)会将整个元素旋转180度，包括文字内容。为了阻止这种情况发生，我们可以对只是文本元素应用负旋转。这是通过添加.card:hover .front规则来实现的。

如何在卡片旋转时避免字符串翻转

1 个答案: