Cách sử dụng CSS3 Transformations - núm vú

CSS3 bao gồm khả năng áp dụng các phép biến đổi hình học vào bất kỳ phần tử nào trong trang web HTML5 của bạn. Điều này cung cấp một mức độ kiểm soát thị giác đáng chú ý trước đây không có sẵn cho các nhà phát triển web.

Thuộc tính chuyển đổi cho phép bạn áp dụng một phép biến đổi toán học thành bất kỳ div nào. Khi bạn áp dụng phép biến đổi thành một phần tử, bạn cần áp dụng một hoặc nhiều thông số sau để mô tả kiểu chuyển đổi:

• dịch : Di chuyển đối tượng từ vị trí mặc định của nó. Dịch đòi hỏi hai tham số, đo X và đo Y. Sử dụng các đơn vị đo lường tiêu chuẩn CSS.

• xoay : Xoay hình xung quanh giá trị trung tâm. Lấy một tham số, một phép đo góc độ theo độ. (Ví dụ, 30 độ là 30deg.)

• scale : Thay đổi kích thước của đối tượng. Phiên bản tiêu chuẩn thay đổi đều theo chiều ngang và dọc. Các thuộc tính scalex và scaley có thể được sử dụng để điều chỉnh thang đo theo trục riêng lẻ. Quy mô được đo bằng các đơn vị đo lường tiêu chuẩn CSS. Nếu quy mô lớn hơn 1, đối tượng lớn hơn bản gốc. Một quy mô từ 0 đến 1 làm cho sản phẩm nhỏ hơn nó.

• skew : Điều này cho phép bạn nghiêng phần tử theo một góc độ. Tham số yêu cầu đo góc dưới độ. Các biến dạng nghiêng và xiên cho phép kiểm soát hoàn toàn việc chuyển đổi.

Bạn có thể kết hợp nhiều tham số bằng cách liệt kê chúng sau khi thuộc tính chuyển đổi được phân cách bởi dấu cách.

Để minh họa, hãy tưởng tượng đoạn mã HTML sau đây:

hộp 1 hộp 2 hộp 3 hộp 4 hộp 5

Mã hiển thị năm div giống nhau. Với mục đích minh hoạ, tất cả các div chia sẻ cùng một CSS chung:

# box1, # box2, # box3, # box4, # box5 {width: 100px; chiều cao: 80px; biên giới: 3px màu đen rắn; background-color: yellow;}

Áp dụng các biến thể của thuộc tính cho mỗi phần tử để xem các phép biến đổi hoạt động như thế nào.

# box2 {transform: translate (100px, 0px);} # box3 {transform: rotate (45deg);} # box4 {transform: scale (2) translate (100px, 0px);} # box5 {transform: skew (3);}

Lưu ý rằng hỗ trợ của trình duyệt đang thay đổi đối với phần tử này. Chrome và Safari vẫn mong đợi tiền tố -webkit, nhưng Firefox và Opera hỗ trợ phiên bản không bắt đầu. IE 10 về mặt lý thuyết hoạt động với phiên bản tiêu chuẩn, nhưng phiên bản 9 yêu cầu -ms-tiền tố, và các phiên bản trước của IE chỉ đơn giản là bỏ qua biến đổi hoàn toàn. Nếu bạn xem mã nguồn thực tế của phép biến đổi.html, bạn sẽ thấy nhiều phiên bản để xử lý các trình duyệt khác nhau:

# box2 {biến đổi: dịch (100px, 0px); -webkit-chuyển đổi: dịch (100px, 0px); -ms-transform: translate (100px, 0px);}

Cuối cùng, thông thường sẽ phát sinh ra và các tiền tố cụ thể của nhà cung cấp sẽ không còn cần thiết nữa, nhưng trong thời gian này, an toàn nhất là đặt chúng vào đúng chỗ. Nếu bạn muốn bắt các phiên bản cũ của Firefox và Opera, bạn cũng có thể bao gồm các tiền tố (-moz- và -o-).