Xoay, co giãn, bóp méo hình ảnh

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



                            


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

     

 Ví dụ 2 :Phóng to đối tượng lên gấp 1,5 lần hiện tại.

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.

Ví dụ 2: Bóp méo đối tượng với hệ số góc dương

Chúc các bạn thành công ! 

Lưu ý!
Chào mừng bạn đến với Blog Lâm Gia Trang

• Vui lòng để lại một comment góp ý.
• Bấm nút +1 nếu bạn thấy thích bài viết này.
• Chúc thành công !