Hướng dẫn Cách sử dụng CSS transform cho IE 6,7,8

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,694
Cách sử dụng CSS transform cho IE 6,7,8

Các trình duyệt IE cũ không hỗ trợ nhiều thuộc tính hữu ích trong CSS3, bạn vẫn có thể có nhiều cách để mang những tính năng hiện đại của CSS đến trình duyệt InternetEplorer bằng việc tham khảo các phương pháp từ thư viện phát triển của Microsoft. Ta sẽ cùng tìm hiểu về một tính năng khá hay trong bộ CSS3 transform đó là rotate xoay đối tượng, để có thể thực hiện điều này trên các phiên bản của trình duyệt IE 8 về trước bạn có thể thêm một đoạn code như ví dụ sau vào file CSS của bạn:
Mã:
<div>I am here</div>
div{
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Đây là phương pháp "filter BasicImage" của Ms, thuộc tính rotation bên trên có thể nhận một trong những giá trị sau:
  • 0 Mặc định. Nội dung giữ nguyên
  • 1 Xoay một góc 90 độ.
  • 2 Xoay một góc 180 độ.
  • 3 Xoay một góc 270 độ.
Ngoài ra để có một cách sử dụng đơn giản và giải pháp tổng thể hơn, bạn có thể sử dụng ứng dụng transformie viết với jQuery của tác giả Paul Bakaus. Bạn có cách sử dụng khá đơn giản như sau:
Mã:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="sylvester.js"></script>
<script type="text/javascript" src="transformie.js"></script>
<style type="text/css">
div{
  width: 300px;
  height: 300px;
  background: #286f46;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
  $('div').css($.browser.safari ? 'webkitTransform' : 'MozTransform', 'rotate(45deg)');
});
</script>
<div>tranformie</div>

Với ứng dụng này bạn có một bộ transform dùng cho trình duyệt IE với các tính năng:
  • rotate
  • scale, scaleX, scaleY
  • skew, skewX, skewY
  • matrix
Xem demo và tải nguồn ứng dụng transformie của tác giả tại github.

Chúc các bạn thành công.


Nguồn: sothichweb.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile: 0906081284

Zalo: 0988488096

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom