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:
Đâ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:
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:
Chúc các bạn thành công.
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 độ.
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
Chúc các bạn thành công.
Nguồn: sothichweb.com
Bài viết liên quan
Bài viết mới