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

[PVS]

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:

<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:

<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​