如何避免字符串翻轉時卡旋轉

在這裏，而旋轉卡的文字翻轉，有沒有什麼辦法來解決它。我想過使用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>

來源

2017-02-03 user5353093

按預期工作，請參閱[JSFiddle]（http://jsfiddle.net/FPCRb/2240/） –

施加負旋轉文本，它會像文字不旋轉

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

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

http://jsfiddle.net/FPCRb/2241/（榮譽給Bhushan Kawadkar爲JS-小提琴）出現

注意旋轉是通過CSS代碼完成的，不需要JS/jquery。

一旦鼠標懸停在卡上，.card:hover規則將應用轉換規則。 rotateZ(180deg)會將整個元素旋轉180度，包括文字內容。爲了阻止這種情況的發生，我們可以向僅應用一個負向旋轉的文本元素。這是通過添加.card:hover .front規則來實現的。

來源

2017-02-03 14:57:03 Lars

如何避免字符串翻轉時卡旋轉​​

回答

相關問題

如何避免字符串翻轉時卡旋轉