Xoay chữ với CSS3

Xoay chữ

Quả là CSS3 làm mình kinh ngạc – nó có nhiều thuộc tính thật hấp dẫn, mà trước đây mình nghĩ chẳng thể nào làm được – chắc phải dùng Flash thôi. Đây là bài đầu tiên mình nói về CSS3, và giới thiệu một trong những kỹ thuật đơn giản nhất của CSS3 – đó là xoay chữ, ví dụ về lệnh:

transform: rotate(17deg);
-webkit-transform: rotate(17deg);
-ms-transform: rotate(17deg);
-moz-transform: rotate(17deg);
17deg chính là góc xoay – ở đây là 17 độ, nếu muốn xoay một góc vuông, bạn để 90deg. Các cái -webkit- và -ms- và -moz- chính là để tương thích với từng trình duyệt lần lượt là Google Chrome, IE và FireFox. Nhưng sao lại phải lằng nhằng thế – Đây chính là vấn đề của CSS3, vì nó vẫn còn trong giai đoạn phát triển nên các trình duyệt chưa hỗ trợ đầy đủ và thống nhất.
Giờ thì mình thử nghiêng một chữ xem sao – trong ví dụ này mình nghiêng 45 độ:

 

NGUYỄN ĐỨC ANH

2 thoughts on “Xoay chữ với CSS3”

  1. Thuộc tính transform này sử dụng được với những thẻ nào bạn? Mình thấy nó ko sử dụng được với thẻ heading : h1…

    Reply

Leave a Comment