24 tháng 6, 2012

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.

1.Xoay đố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
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhEBZAhPwLOtkWC6wR5ulabknhbuTv5xn-1z5XPtIrFo_vZ3GTIJPZW19HwaPjvHpmCfqZcOXUWx78vQU-9Jb8MFxyZgP1L81ninltPkzOLgIF1RLHfRI_G5OYXscSoP4Yuds2QamEiWvt/s320/xoay-anh-bang-css-namkna-blogspot-com.png" alt="Rotate" style="-moz-transform: rotate(17deg); -webkit-transform: rotate(17deg);" />


Rotate


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
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhEBZAhPwLOtkWC6wR5ulabknhbuTv5xn-1z5XPtIrFo_vZ3GTIJPZW19HwaPjvHpmCfqZcOXUWx78vQU-9Jb8MFxyZgP1L81ninltPkzOLgIF1RLHfRI_G5OYXscSoP4Yuds2QamEiWvt/s320/xoay-anh-bang-css-namkna-blogspot-com.png" alt="Rotate" style="-moz-transform: scale(0.5); -webkit-transform: scale(0.5);" />
Rotate
Ví dụ 2: Phóng to đối tượng lên gấp 1,5 lần hiện tại.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhEBZAhPwLOtkWC6wR5ulabknhbuTv5xn-1z5XPtIrFo_vZ3GTIJPZW19HwaPjvHpmCfqZcOXUWx78vQU-9Jb8MFxyZgP1L81ninltPkzOLgIF1RLHfRI_G5OYXscSoP4Yuds2QamEiWvt/s320/xoay-anh-bang-css-namkna-blogspot-com.png" alt="Rotate" style="-moz-transform: scale(1.5); -webkit-transform: scale(1.5);" />




Rotate



3. Bóp méo đối tượng


Để bóp méo đối tượng chúng ta có thuộc tính -moz-transform: skew(góc);, tùy theo góc bóp méo mà đối tượng sẽ bị lệch về bên trái hay bên phải.

Ví dụ 1: Bóp méo đối tượng với hệ số góc âm.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhEBZAhPwLOtkWC6wR5ulabknhbuTv5xn-1z5XPtIrFo_vZ3GTIJPZW19HwaPjvHpmCfqZcOXUWx78vQU-9Jb8MFxyZgP1L81ninltPkzOLgIF1RLHfRI_G5OYXscSoP4Yuds2QamEiWvt/s320/xoay-anh-bang-css-namkna-blogspot-com.png" alt="Rotate" style="-moz-transform: skew(-45deg); -webkit-transform: skew(-45deg);" />
Rotate
Ví dụ 2: Bóp méo đối tượng với hệ số góc dương
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhEBZAhPwLOtkWC6wR5ulabknhbuTv5xn-1z5XPtIrFo_vZ3GTIJPZW19HwaPjvHpmCfqZcOXUWx78vQU-9Jb8MFxyZgP1L81ninltPkzOLgIF1RLHfRI_G5OYXscSoP4Yuds2QamEiWvt/s320/xoay-anh-bang-css-namkna-blogspot-com.png" alt="Rotate" style="-moz-transform: skew(45deg); -webkit-transform: skew(45deg);" />
Rotate
- Nào bạn hãy thử đi.
Tham khảo: cssyeah.
Chủ đề:

0 nhận xét:

Đăng nhận xét

Support : Guide | Blogspot Tips | Television | IDM | Software Free | Site Map | Back Link | Contact | ↑ back to top
Ghi rõ nguồn kynangblog.blogspot.com khi phát hành lại thông tin từ trang này
Copyright © 2011. KỸ NĂNG BLOG - All Rights Reserved
Design by KyNangBlog Edit Ky nang blog
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Six million kynangblog template byKyNangBlog
Blogger Gadgets