Hỗ trợ trình duyệt quy mô CSS

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

Làm cách nào tôi có thể chia tỷ lệ toàn bộ trang web bằng CSS?

Tôi có thể sử dụng CSS theo tỷ lệ không?

Tỷ lệ () trong CSS là gì?

Tôi có thể sử dụng CSS thu phóng không?