tailieunhanh - Xoay, co giãn, bóp méo đối tượng với CSS3

Đối với các Designer khi tiến hành xoay hoặc co giãn ảnh thường họ dùng các công cụ đồ họa như Photoshop, Firework,. để thực hiện, nhưng đối với CSS3 thì chúng ta thực hiện xoay đối tượng một cách hết sức đơn giản chỉ với một vài dòng CSS. Để minh chứng cho điều đó trong bài viết này tôi xin trình bày với các bạn cách xoay và co giãn một đối tượng ảnh bằng cách dùng các lệnh của CSS3. đối tượng Để xoay một đối tượng nào đó chúng ta sẽ dùng 2 thuộc tính. | Xoay co giãn bóp méo đối tượng với CSS3 Đối với các Designer khi tiến hành xoay hoặc co giãn ảnh thường họ dùng các công cụ đồ họa như Photoshop Firework . để thực hiện nhưng đối với CSS3 thì chúng ta thực hiện xoay đối tượng một cách hết sức đơn giản chỉ với một vài dòng CSS. Để minh chứng cho điều đó trong bài viết này tôi xin trình bày với các bạn cách xoay và co giãn một đối tượng ảnh bằng cách dùng các lệnh của CSS3. đối tượng Để xoay một đối tượng nào đó chúng ta sẽ dùng 2 thuộc tính -moz-transform rotate góc xoay và -webkit-transform rotate góc xoay . Ban đầu chúng ta có một đối tượng ảnh như sau Sau khi thêm style vào cho đối tượng view source print 1. img src http images stories contents alt Rotate style -moz-transform rotate 7deg -webkit-transform rotate 7deg 2. Co giãn đối tượng Để co giãn đối tượng CSS3 có hỗ trợ 2 thuộc tính để thao tác trên đối tượng -moz-transform scale xx -webkit-transform scale xx . Thuộc tính này sẽ có hoặc giãn đỗi tượng tùy theo tỉ lệ . Ví dụ 1 Co đối tượng với tỉ lệ bằng 1 2 view source print 1. img src http images stories contents rotatejpg alt Rotate style -moz-transform scale -webkit-transform scale Ví dụ 2 Phóng to đối tượng lên gấp 1 5 lần hiện tại. view .