CSS3 cho phép chúng ta thao tác với các đối tượng trong không gian 2D bằng cách sử dụng thuộc tính
transform: translate[30px, 20%];3 và các hàm của nó để chuyển đổi 2D
chuyển đổi chức năng
Thuộc tính
transform: translate[30px, 20%];3 chỉ định các phép biến đổi nhất định sẽ được áp dụng cho một phần tử. Ví dụ, nó có thể kết hợp một số hàm biến đổi bằng cách tách chúng bằng khoảng trắng
transform: scale[2] rotate[180deg] translateX[15px];
Dịch
Hàm
transform: translate[30px, 20%];0 di chuyển phần tử theo một giá trị offset được xác định bằng hai giá trị, nếu chỉ xác định một giá trị thì giá trị thứ hai sẽ bằng 0. Đây là một ví dụ cơ bản
transform: translate[30px, 20%];
Nếu một đối tượng chỉ cần dịch trên một trục thì có thể sử dụng các hàm
transform: translate[30px, 20%];1 và
transform: translate[30px, 20%];2, chúng có thể biểu diễn ví dụ trên như thế này
transform: translateX[30px] translateY[20%];
Mà sẽ tạo ra một kết quả giống hệt nhau
Tỉ lệ
Hàm
transform: translate[30px, 20%];3 thay đổi kích thước toàn bộ phần tử khi sử dụng một hoặc hai số không có đơn vị, trong đó
transform: translate[30px, 20%];4 không thay đổi,
transform: translate[30px, 20%];5 bằng một nửa chiều dài và chiều rộng, và
transform: translate[30px, 20%];6 gấp đôi chiều dài và chiều rộng. Nếu hai số được cung cấp, số đầu tiên xác định mức độ phần tử sẽ được kéo dài/thu gọn theo chiều ngang và số thứ hai - theo chiều dọc. ví dụ sau
transform: translate[30px, 20%];0
Sẽ kéo dài vật thể ra gấp ba lần chiều rộng ban đầu của nó và sẽ làm cho nó rộng bằng một nửa. Điều này sẽ giống như tuyên bố
transform: translate[30px, 20%];1
Nghiêng
Hàm
transform: translate[30px, 20%];7 nghiêng phần tử bằng cách sử dụng một hoặc hai giá trị góc. Nếu
transform: translate[30px, 20%];8 được xác định, các cạnh trên và dưới của phần tử sẽ vẫn nằm ngang, nhưng các cạnh trái và phải sẽ "nghiêng" sang trái 45 độ. Nếu
transform: translate[30px, 20%];9 được xác định thì các cạnh trái và phải của phần tử sẽ vẫn thẳng đứng, nhưng các cạnh trên và dưới sẽ nghiêng sang phải 30 độ
Quay
Ví dụ, hàm
transform: translateX[30px] translateY[20%];0 xoay phần tử theo chiều kim đồng hồ theo một góc được xác định bằng một giá trị
transform: translate[30px, 20%];6
Sẽ xoay toàn bộ phần tử 45 độ theo chiều kim đồng hồ
Biến đổi nguồn gốc
Thuộc tính gốc biến đổi đặt gốc của phép biến đổi [xoay, tỷ lệ, v.v. ] của một đối tượng trong một hệ tọa độ đơn giản. Gốc mặc định của mỗi đối tượng là tâm hình học của nó
Đặt hai giá trị cho
transform: translateX[30px] translateY[20%];1 xác định vị trí ngang và dọc
transform: translateX[30px] translateY[20%];2
transform: translateX[30px] translateY[20%];3 hoặc
transform: translateX[30px] translateY[20%];3 hoặc
transform: translateX[30px] translateY[20%];5/
transform: translateX[30px] translateY[20%];6/
transform: translateX[30px] translateY[20%];7
transform: translateX[30px] translateY[20%];8
transform: translateX[30px] translateY[20%];3 hoặc
transform: translateX[30px] translateY[20%];3 hoặc
transform: translate[30px, 20%];01/
transform: translateX[30px] translateY[20%];6/
transform: translate[30px, 20%];03
transform: translate[30px, 20%];04
Nếu chỉ có một giá trị được chỉ định, nó đề cập đến vị trí nằm ngang, vị trí thẳng đứng trong trường hợp này được giả định là 'trung tâm'. Theandvalues ở đây là phần bù của nguồn gốc biến đổi từ góc trên cùng bên trái của phần tử
Thuộc tính
transform: translateX[30px] translateY[20%];1 cũng có thể nhận nhiều hơn hai giá trị
transform: translate[30px, 20%];2
Trong những trường hợp như vậy, giá trị thứ hai và thứ tư xác định phần bù từ cạnh được xác định bởi từ khóa trước nó. Nguồn gốc biến đổi cho ví dụ trên là 25px từ dưới lên và 40% từ cạnh phải của phần tử
Nếu chỉ có ba giá trị được đưa ra, thì giá trị thiếu thứ tư - độ lệch dọc - được coi là bằng không
Tóm lược
Các hàm
transform: translate[30px, 20%];3,
transform: translate[30px, 20%];7 và
transform: translate[30px, 20%];0 có thể được sử dụng để khai báo các giá trị ngang và dọc của nó cùng nhau hoặc riêng biệt bằng cách sử dụng
transform: translate[30px, 20%];09,
transform: translate[30px, 20%];10,
transform: translate[30px, 20%];11,
transform: translate[30px, 20%];12,
transform: translate[30px, 20%];1 và
transform: translate[30px, 20%];2. Hàm
transform: translateX[30px] translateY[20%];0 chỉ có thể có một giá trị
Hỗ trợ trình duyệt
Các biến đổi CSS hiện được các trình duyệt này hỗ trợ với các tiền tố
Chrome10 trở lên
firefox 3. 6+
Internet Explorer9+
Opera 11+
Safari 5+
Khi khai báo các biến đổi, luôn viết các khai báo có tiền tố trước và khai báo tiêu chuẩn không có tiền tố ở cuối