So vermeiden Sie, dass die Zeichenfolge umgedreht wird, während die Karte gedreht wird

Hier wird beim Drehen der Karte der Text umgedreht, gibt es einen Weg, ihn zu reparieren. Ich dachte an die reverse() -Methode, aber der Text ist auf den Kopf gestellt. Bitte hilf mir. Ich habe jQuery Hover() -Methode mit zwei Funktionen verwendet.So vermeiden Sie, dass die Zeichenfolge umgedreht wird, während die Karte gedreht wird

<!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>

Quelle

2017-02-03 user5353093

Arbeiten wie erwartet, siehe [JSFiddle] (http://jsfiddle.net/FPCRb/2240/) –

Tragen Sie eine negative Drehung auf den Text, Es erscheint wie der Text nicht

dreht

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

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

http://jsfiddle.net/FPCRb/2241/ (ein dickes Lob an Bhushan Kawadkar für die js-Geige)

Beachten Sie, dass Die Rotation erfolgt über CSS-Code, JS/Jquery ist nicht erforderlich.

Die Regel .card:hover wendet die Transformationsregel an, sobald Sie die Maus über die Karte bewegen. rotateZ(180deg) wird das gesamte Element um 180 Grad gedreht, einschließlich des Textinhalts. Um dies zu verhindern, können wir eine negative Rotation auf nur das Textelement anwenden. Dies wird durch Hinzufügen der .card:hover .front Regel erreicht.

Quelle

2017-02-03 14:57:03 Lars

So vermeiden Sie, dass die Zeichenfolge umgedreht wird, während die Karte gedreht wird

Antwort

Verwandte Themen