Geek Answers Handbook

As soon as you rotate the background 180 degrees (do not rotate the font)

this is my 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>

the div rotates 180 degrees, and the font also rotates 180 degrees,

but I don’t want the font to rotate,

What can I do.

thank

+5
source share
2 answers

Why rotate it at all? Just describe your gradient in the opposite direction:

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)));
+1
source

Unfortunately, there is no solution yet! You either rotate the entire block (including content, font, and background), or do not rotate it. Excuse me!

You can find documentation on these two sites:

"", , "" , .

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

( )

+2

More articles:


All Articles