कैसे पृष्ठभूमि 180 डिग्री केवल बारी बारी से करने, (फ़ॉन्ट बारी बारी से नहीं)

Question

यह मेरा कोड है:

<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 180 डिग्री बारी बारी से, और फ़ॉन्ट भी 180 डिग्री बारी बारी से किया जाता है,

लेकिन , मैं नहीं चाहता कि फ़ॉन्ट घुमाए,

मैं क्या कर सकता हूं।

धन्यवाद

Answer 1

इसे क्यों घुमाएं? बस अपने ढाल को दूसरे तरीके से वर्णन करें:

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

दुर्भाग्य से अभी तक कोई मौजूदा समाधान नहीं है! आप या तो पूरे ब्लॉक (सामग्री, फ़ॉन्ट और पृष्ठभूमि शामिल) घुमाते हैं या आप इसे घुमाने नहीं देते हैं। क्षमा करें!

आप इन दो वेबसाइटों पर प्रलेखन पा सकते हैं:

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

बाद में एक एक 'चाल' समाधान है कि शायद मदद कर सकता है प्रदान करता है, एक 'झूठे' ब्लॉक बनाने आपकी पृष्ठभूमि युक्त

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

(SitePoint स्रोत)