Webkit-transform trong css
|
CSS3 2D Transforms là thuộc tính dùng để xử lý hiệu ứng chuyển đổi 2D (không gian hai chiều), ví dụ bạn có thể sử dụng CSS3 để quay thẻ HTML một góc 180 độ, hoặc kéo kéo thu nhỏ để khi di chuột vào đối tượng . Thì tất cả những hiệu ứng như vậy trong không gian hai chiều ta gọi là 2D Transforms Show  Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức. Cú pháp để tạo biến đổi như sau transform: value; Bài viết này đã được đăng tại [free tuts. net] Trong đó /* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);1 là một trong các giá trị sau
Mỗi giá trị sẽ có những công dụng khác nhau và chúng ta sẽ tìm hiểu chi tiết hơn ở các phần dưới đây 1. Chuyển đổi translate() trong CSS3/* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);8 có tác dụng chuyển đối tượng HTML từ vị trí hiện tại của nó Có hai tham số truyền vào như sau. /* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);9 in which
Mã Hack CSS /* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px); Ví dụ. XEM THỬ /* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);0 Kết quả. Khi bạn di chuột vào nó sẽ di chuyển xuống bên dưới 2. Chuyển đổi xoay() trong CSS3Rotate() dùng để xoay đối tượng HTML theo một góc độ nào đó Cú pháp. nó có một tham số truyền vào và đó chính là tham số mà ta muốn xoay. Nếu giá trị âm thanh thì nó xoay ngược chiều kim đồng hồ và ngược lại nó xoay cùng chiều kim đồng hồ. /* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);4 Ví dụ. XEM THỬ /* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);5 Kết quả. Đối tượng HTML xoay một góc 20 độ 3. Chuyển đổi tỷ lệ () trong CSS3Scale() dùng để kéo giãn đối tượng HTML cú pháp /* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);6 in which
Nghĩa là giá trị bạn nhập vào chính là tỷ lệ so với độ dài hiện tại. If you enter 0. 5 thì nó sẽ có độ dài bằng 1/2 hiện tại, nếu bạn nhập 2 thì nó sẽ có độ dài gấp đôi Ví dụ. XEM THỬ /* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);9 Kết quả 4. Biến đổi skew() - skewX() - skewY() trong CSS3Skew() dùng để bẻ góc của chiều rộng và chiều cao của đối tượng HTML cú pháp /* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);0 in which
Nếu bạn chỉ muốn bẻ cong hai bên cạnh thì sử dụng cú pháp sau /* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);3 Nếu lệnh cấm chỉ muốn bẻ cong hai cạnh bên dưới thì sử dụng cú pháp sau /* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);4 Ví dụ. XEM THỬ /* IE 9 */ -ms-transform: translate(50px,100px); /* Safari */ -webkit-transform: translate(50px,100px);0 5. Biến đổi ma trận() trong CSS3Matrix() là hàm tổng hợp tất cả các thuộc tính ở trên, nó có 6 tham số cho phép bạn xoay, di chuyển, kéo giãn các đối tượng HTML Đây là một tính chất khá phức tạp và bạn hãy quên công việc ngồi vắt óc suy nghĩ để tính toán cho từng giá trị Nên để không mất thời gian thì mình sẽ không đề cập đến thuộc tính này, bạn có thể tham khảo tại đây. Hẹn một ngày không xa chúng ta sẽ có một bài viết về vấn đề này 6. Lời kếtDo đó mình đã giới thiệu xong một số thuộc tính xử lý hiệu ứng 2D cho đối tượng HTML trong CSS3, trình bày này chỉ mang tính chất giới thiệu để bạn hiểu ý nghĩa của từng thuộc tính nên mình không cho nhiều ví dụ. |
