Cái nhìn về chuyển đổi CSS3 2D
Các Mô đun chuyển đổi là một bổ sung to lớn trong CSS3, nó đưa cách chúng ta thao tác các yếu tố trên một trang web lên cấp độ tiếp theo.
Có một số thí nghiệm thực sự làm tôi ngạc nhiên, ví dụ như cái này. Tuy nhiên, chúng tôi sẽ không xây dựng một cái gì đó giống như một biểu tượng chỉ có CSS bằng cách nào đó có thể chuyển đổi thành Autobot, vì nó có thể quá sức và không hoàn toàn có thể sử dụng được trong cuộc sống thực..
Thay vào đó, lần này, chúng tôi sẽ lùi lại và xem xét các khái niệm cơ bản về Chuyển đổi 2D của CSS3 để xem cách nó hoạt động ở cấp độ cơ bản.
Cú pháp
Mô-đun Chuyển đổi CSS3 về cơ bản cho phép chúng ta chuyển đổi một phần tử đến một mức độ nhất định như dịch, chia tỷ lệ, xoay và xiên.
Cú pháp chính thức là biến đổi: phương thức (giá trị). Tuy nhiên, giống như bất kỳ bổ sung tuyệt vời CSS3 nào khác vẫn đang ở giai đoạn đầu, các trình duyệt hiện tại vẫn cần phiên bản cú pháp để chạy các biến đổi. Vì vậy, cú pháp hoàn chỉnh sẽ bật ra như thế này:
biến đổi: phương thức (giá trị); / * Cú pháp chính thức của W3C * / -o-Transform: phương thức (giá trị); / * Opera 10.5+ * / -ms-Transform: phương thức (giá trị); / * Internet Explorer 9.0+ * / -moz-Transform: phương thức (giá trị); / * Firefox 3.6+ * / -webkit-Transform: phương thức (giá trị); / * Chrome / Safari 3.2+ * /
Ngoài ra, phương pháp chúng tôi đang đề cập ở trên là chức năng biến đổi, có thể được thay thế bằng một trong những điều sau đây: dịch(), tỉ lệ(), quay() hoặc là nghiêng().
Giá trị
Hầu hết giá trị của phương thức sẽ tương ứng với Trục X và Trục Y. Nếu bạn nhớ hệ tọa độ Descartes từ lớp Toán ở trường trung học, nguyên tắc cơ bản khá giống nhau, trục X đại diện cho ngang đường thẳng và trục Y biểu thị theo chiều dọc hàng.
Ngoại trừ các vòng quay. Các Vòng xoay sẽ sử dụng tọa độ cực được biểu thị bằng độ từ 0 đến 360.
Các giá trị cho tất cả các phương thức có thể là âm hoặc dương. Tuy nhiên, chỉ cần lưu ý, vì trang web được đọc tuần tự từ trên xuống dưới, điều này làm cho trục Y trong web hoạt động ngược lại với nguyên tắc ban đầu của tọa độ Descartes. Điều này có nghĩa là khi bạn thêm một giá trị âm vào Trục Y, thay vào đó, nó sẽ di chuyển lên trên cùng.
Sử dụng các biến đổi
Bây giờ, hãy xem trình diễn cơ bản sau đây để xem Chuyển đổi trong hành động.
Tôi dịch
Đừng để bị che mờ với thuật ngữ dịch, nó sẽ không dịch ngoại ngữ. Các dịch đây thực sự là một phương pháp để di chuyển các yếu tố theo một số hướng.
Phương thức chứa hai giá trị; X và Y. các Giá trị X như chúng tôi đã chỉ ra ở trên sẽ lấy phần tử theo chiều ngang; bên trái hoặc bên phải, trong khi Y giá trị sẽ đưa nó theo chiều dọc để dưới cùng hoặc trên cùng.
Bây giờ, hãy xem một số trình diễn đơn giản dưới đây:
div chiều rộng: 100px; chiều cao: 100px; biến đổi: dịch (100px, 250px);
Đoạn mã ở trên sẽ di chuyển phần tử cho 100px sang bên phải và 250px ở dưới cùng.
div chiều rộng: 100px; chiều cao: 100px; biến đổi: dịch (100px, 0);
Đoạn mã ở trên sẽ di chuyển phần tử sang phải cho 100px, bởi vì chúng tôi đang làm lệch trục Y. Sau đó, nếu chúng ta muốn di chuyển phần tử sang trái, chúng ta chỉ cần đặt trục X thành âm, như sau:
div chiều rộng: 100px; chiều cao: 100px; biến đổi: dịch (-100px, 0);
- Bản dịch "Dịch"
Ngoài ra, chúng ta có thể di chuyển phần tử theo một hướng duy nhất với các phương thức riêng lẻ này; dịchX () và dịchY (), sự khác biệt là mỗi phương thức chỉ chấp nhận một giá trị.
Vì vậy, thực tế mà nói, biến đổi: dịch (-100px, 0) cũng bằng biến đổi: translateX (-100px).
II - Thang đo
Các tỉ lệ phương pháp cho phép chúng ta phóng to hoặc thu nhỏ các yếu tố từ kích thước thực tế của nó. Giá trị của thang đo giống như dịch Phương pháp trên, nó cũng chứa X và Y. Sự khác biệt duy nhất là chúng tôi không chỉ định đơn vị. Đây là một ví dụ:
div chiều rộng: 100px; chiều cao: 100px; biến đổi: tỷ lệ (1,5);
Ví dụ trên sẽ phóng to div 1,5 hoặc 150% kích thước thực tế của nó, và vì chúng tôi chia tỷ lệ bằng nhau cho cả hai hướng X và Y, chúng tôi chỉ cần khai báo nó theo một giá trị. Bạn cũng có thể khai báo nó theo cách này biến đổi: tỷ lệ (1,5,1,5); nếu bạn muốn đi chi tiết hơn, nó sẽ làm tương tự.
Hơn nữa, nếu chúng tôi muốn giảm phần tử, chúng tôi sẽ sử dụng cụ thể một giá trị từ 0,999 đến 0 tuyệt đối, như ví dụ dưới đây, sẽ giảm kích thước của div xuống 50% hoặc một nửa:
div chiều rộng: 100px; chiều cao: 100px; biến đổi: tỷ lệ (0,5);
Nhưng, hãy thận trọng, nếu bạn đặt giá trị là tuyệt đối “0” các div sẽ biến mất, vì vậy trừ khi bạn có lý do chính đáng để làm như vậy, tôi không khuyên bạn nên làm điều đó.
- Bản demo "Quy mô"
III - Xoay
Như chúng tôi đã đề cập trước đó trong bài viết này, quay phương thức sử dụng tọa độ cực, vì vậy giá trị được ghi bằng độ. Đây là hai ví dụ
Đoạn mã dưới đây sẽ xoay div 30 độ theo chiều kim đồng hồ.
div chiều rộng: 100px; chiều cao: 100px; biến đổi: xoay (30deg);
Một giá trị âm, như được minh họa trong ví dụ dưới đây, sẽ xoay div theo hướng ngược lại (ngược chiều kim đồng hồ) ở cùng một mức độ.
div chiều rộng: 100px; chiều cao: 100px; biến đổi: xoay (-30deg);
- Bản demo "Xoay"
IV - Xiên
Các nghiêng phương pháp cho phép chúng ta tạo ra một loại hình bình hành. Nó cũng chứa hai giá trị của trục X và Y. Tuy nhiên, giá trị được nêu ở mức độ, thay vì các phép đo tuyến tính như chúng ta sử dụng cho tỉ lệ hoặc là dịch phương pháp. Đây là một ví dụ:
div chiều rộng: 200px; chiều cao: 100px; biến đổi: xiên (30deg, 10deg);
- Bản demo "Skew"
V - Nhiều phương thức
Các biến đổi thuộc tính không bị giới hạn chỉ xử lý một phương thức, trên thực tế chúng ta có thể bao gồm nhiều phương thức trong các khai báo đơn lẻ, như sau:
div chiều rộng: 100px; chiều cao: 100px; biến đổi: translateX (100px) xoay (45deg);
Đoạn mã trên sẽ di chuyển phần tử 100px sang bên phải và đồng thời nó cũng xoay 45 độ.
Bản demo "Nhiều phương thức".
Biến đổi nguồn gốc
Các nguồn gốc transfrom - như tên của nó ngụ ý - được sử dụng để kiểm soát điểm bắt đầu của biến đổi. Nếu chúng tôi không khai báo rõ ràng thuộc tính này với cú pháp sau biến đổi-nguồn gốc: X Y;, sau đó trình duyệt sẽ lấy giá trị mặc định là 50% cho X và 50% cho Y.
Bây giờ, nếu chúng ta chỉ định biến đổi nguồn gốc đến 0 (X) 0 (Y) quá trình chuyển đổi sẽ bắt đầu ở phía trên bên trái.
Một lần nữa, tất cả các trình duyệt vẫn cần phiên bản tiền tố để gọi thuộc tính này. Vì vậy, đây là phiên bản hoàn chỉnh để đảm bảo nó hoạt động trong hầu hết các trình duyệt hiện tại:
-webkit-Transform-origin: X Y; -moz-Transform-origin: X Y; -o-Transform-origin: X Y; -ms-Transform-origin: X Y; biến đổi-nguồn gốc: X Y;
- Bản demo "Transform-origin"
Phần kết luận
Chúng tôi đã đi qua tất cả bốn phương pháp chuyển đổi thiết yếu; dịch, chia tỷ lệ, xoay và nghiêng
Tuy nhiên, như đã đề cập, mô-đun này vẫn đang ở giai đoạn đầu, vì vậy nếu bạn sẽ áp dụng các phương pháp này trong trang web tiếp theo của mình, hãy đảm bảo rằng nó xuống cấp một cách duyên dáng cho các trình duyệt không tương thích (Tôi không đề cập đến IE6 ở đây).
Cuối cùng, bạn có thể xem tất cả các bản demo hoặc tải xuống nguồn từ các liên kết sau.
- Bản giới thiệu
- Tải xuống nguồn
