Xoay 90 độ trong CSS trong IE8 và thấp hơn

Question

Làm cách nào để xoay 90 độ trong IE 8 trở xuống, chỉ sử dụng CSS?

.horizontal { 
    display: block; 
    width: 300px; 
    height: 100px;/*height*/ 
    background: #FF0000; 
    margin: auto; 
    margin-top: 110px; 
    text-align: center; 
    border: 5px solid #000000; 

    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
} 

Answer 1

Bạn muốn sử dụng filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

CSS

.horizontal { 
    display: block; 
    width: 300px; 
    height: 100px;/*height*/ 
    background: #FF0000; 
    margin: auto; 
    margin-top: 110px; 
    text-align: center; 
    border: 5px solid #000000; 

    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    transform: rotate(-90deg); 
} 

More information on this

Answer 2

writing-mode mà hiện đang trong dự thảo CSS3 specificati cho phép chúng tôi hoàn thành việc xoay vòng văn bản mà không cần sử dụng các thuộc tính thích hợp, tương lai hiệu quả trong việc kiểm chứng khái niệm khi nhiều trình duyệt hơn áp dụng thông số dự thảo CSS3.

p { writing-mode: tb-rl; } 

Đó là kỹ thuật CSS cực kỳ đơn giản mà cuối cùng sẽ hoạt động với tất cả các trình duyệt khi hỗ trợ CSS3 của chúng trở nên tốt hơn. Đây là một trong số ít các thuộc tính được hỗ trợ CSS3 trong IE. Giá trị tb-rl cho trình duyệt hiển thị các đoạn văn bản với dòng văn bản từ trên xuống dưới, từ phải sang trái. Về cơ bản, xoay văn bản 90 độ theo chiều kim đồng hồ và căn chỉnh sang phải.

Mục đích thực sự của tài sản này là hiển thị các ngôn ngữ khác trong “chế độ viết” chính xác như tiếng Nhật sang phải hoặc tiếng Ả Rập & tiếng Do Thái hiển thị từ phải sang trái & từ trên xuống dưới (rl-tb).

Hỗ trợ

Tại thời điểm IE là trình duyệt duy nhất để hỗ trợ nó bắt đầu từ IE5.5 trở lên, IE8 cho biết thêm giá trị hơn nữa thông qua việc sử dụng phần mở rộng -ms. Có 4 giá trị có sẵn từ IE5.5 + và 4 giá trị bổ sung cho IE8 + thông qua phần mở rộng -ms.

• lr-tb - Đây là giá trị mặc định, trái sang phải, trên xuống dưới
• rl-tb - Đây chảy văn bản từ phải sang trái, trên xuống dưới
• tb-rl - chảy văn bản theo chiều dọc từ trên xuống dưới, phải sang trái
• bt-rl - từ dưới lên trên, phải sang trái
• tb-lr - Giá trị sau đây chỉ có sẵn trong IE8 + bằng chế độ -ms-writing-mode. chảy văn bản trên xuống dưới, trái sang phải
• bt-lr - dưới lên trên, trái sang phải
• lr-BT - Từ trái sang phải, dưới lên trên
• rl-BT - Quyền trái, dưới lên đầu trang

Xoay văn bản trong các trình duyệt khác?

-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg); 
-ms-transform: rotate(90deg); 
-o-transform: rotate(90deg); 
transform: rotate(90deg); 

Online Demo

-ms-writing-mode property