làm thế nào để chỉ xoay DEG nền 180, (không xoay font)

Question

đây là mã của tôi:

<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 xoay 180 deg, và phông chữ cũng được xoay 180 deg,

nhưng , tôi không muốn phông chữ xoay,

tôi có thể làm gì.

cảm ơn

Answer 1

Tại sao lại xoay vòng? Chỉ cần mô tả độ dốc của bạn theo chiều ngược lại:

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

tiếc là chưa có giải pháp hiện có nào! Bạn có thể xoay toàn bộ khối (nội dung, phông chữ và nền bao gồm) hoặc bạn không xoay nó. Xin lỗi!

Bạn có thể tìm tài liệu trên hai trang web sau đây:

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

Người sau cung cấp một giải pháp 'lừa' rằng có lẽ có thể giúp đỡ, tạo ra một khối 'giả' chứa nền của bạn.

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

(nguồn bởi Sitepoint)