forma única para girar la deg fondo 180, (no girar la fuente)

Question

este es mi código:

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

el div girar 180 grados, y la fuente también se rotan 180 grados,

pero , no quiero que la fuente gire,

qué puedo hacer.

gracias

Answer 1

¿Por qué rotarlo en absoluto? Simplemente describa su gradiente al revés:

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

¡lamentablemente todavía no hay una solución! O bien gira todo el bloque (contenido, fuente y fondo incluidos) o no lo gira. ¡Lo siento!

Puede encontrar documentación sobre estos dos sitios web:

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

la posterior ofrece una solución 'truco' que tal vez podría ayudar, creando un bloque de 'falsa' que contiene tu fondo.

#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); 
} 

(fuente de sitepoint)