comment ne faites pivoter l'arrière-plan de 180 degrés (pas tourner la police)

Question

ceci est mon code:

<style type='text/css'> 
    div { 
    width: 100px; 
    height: 100px; 
    text-align: center; 
    font-size: 22px; 
    background-image: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0.40, #ff0), 
        color-stop(0.5, orange), 
        color-stop(0.60, rgb(255, 0, 0))); 
    -webkit-transform: rotate(180deg) 
} 
</style> 
    <div id="test">click me to play</div> 

div faites pivoter de 180 degrés, et la police est également tourner 180 degrés,

mais , je ne veux pas que la police tourne,

que puis-je faire.

merci

Answer 1

Pourquoi le faire pivoter? Décrivez simplement votre dégradé dans l'autre sens:

background-image: -webkit-gradient(linear, left bottom, left top, 
       color-stop(0.40, #ff0), 
       color-stop(0.5, orange), 
       color-stop(0.60, rgb(255, 0, 0))); 

Answer 2

Malheureusement il n'y a pas encore de solution! Vous faites pivoter le bloc entier (contenu, police et arrière-plan inclus) ou vous ne le faites pas pivoter. Désolé!

Vous pouvez trouver de la documentation sur ces deux sites:

• http://onwebdev.blogspot.com/2011/01/css3-background-rotate-property.html
• http://www.sitepoint.com/css3-transform-background-image/

L'une suite offre une solution 'truc' qui pourrait peut-être aider, créer un bloc 'faux' contenant votre arrière-plan.

#myelement 
{ 
position: relative; 
overflow: hidden; 
-webkit-transform: rotate(30deg); 
-moz-transform: rotate(30deg); 
-ms-transform: rotate(30deg); 
-o-transform: rotate(30deg); 
transform: rotate(30deg); 
} 
#myelement:before 
{ 
content: ""; 
position: absolute; 
width: 200%; 
height: 200%; 
top: -50%; 
left: -50%; 
z-index: -1; 
background: url(background.png) 0 0 repeat; 
-webkit-transform: rotate(-30deg); 
-moz-transform: rotate(-30deg); 
-ms-transform: rotate(-30deg); 
-o-transform: rotate(-30deg); 
transform: rotate(-30deg); 
} 

(source en sitepoint)