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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,185
Được Like
11,583
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

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom