カードが回転しているときに文字列が反転しないようにする方法

ここで、カードを回転させている間に文字が反転しています。私はreverse（）メソッドを使うことを考えましたが、テキストは上を向いています。私を助けてください。 jQuery hover（）メソッドを2つの関数で使用しました。カードが回転しているときに文字列が反転しないようにする方法

<!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/）を参照してください。 –

テキストに逆回転を適用するテキストが（JS-フィドルためBhushan Kawadkarに賛辞）

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

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

http://jsfiddle.net/FPCRb/2241/が回転していないように、それが現れる

なお回転はCSSコードで行われ、JS/jqueryの必要はありません。

.card:hoverルールは、マウスがカードの上を移動すると変換ルールを適用します。 rotateZ(180deg)は、テキストコンテンツを含め、要素全体を180度回転します。これが起こらないようにするには、に負のローテーションを適用して、テキストエレメントのをちょうど適用します。これは、.card:hover .frontルールを追加することによって達成されます。

出典

2017-02-03 14:57:03 Lars

カードが回転しているときに文字列が反転しないようにする方法

答えて

関連する問題