Hướng dẫn scale css w3schools - quy mô css w3schools

Thí dụ

Xoay, độ lệch và tỷ lệ ba yếu tố khác nhau:

div.a {& nbsp; Biến đổi: xoay (20deg);}
  transform: rotate(20deg);
}

div.b {& nbsp; Biến đổi: Skewy (20deg);}
  transform: skewY(20deg);
}

div.c {& nbsp; Biến đổi: ScaleY (1.5);}
  transform: scaleY(1.5);
}

Hãy tự mình thử »

Định nghĩa và cách sử dụng

Thuộc tính transform áp dụng chuyển đổi 2D hoặc 3D cho một phần tử. Thuộc tính này cho phép bạn xoay, quy mô, di chuyển, sai lệch, v.v., các yếu tố.

Đưa ra bản chạy thử ❯

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Các số theo sau là -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.

Cú pháp

Biến đổi: Không có | Phương án biến đổi | Ban đầu | kế thừa;

Giá trị tài sản

dịch3d (x, y, z)

Xác định bản dịch 3D
This example demonstrates how to create "polaroid" pictures and rotate the pictures.

dịch (x)

Xác định bản dịch, chỉ sử dụng giá trị cho trục x

Chuyển dịch (Y)

Xác định bản dịch, chỉ sử dụng giá trị cho trục y

Skew (X-góc, góc Y)

Xác định chuyển đổi độ lệch 2D dọc theo trục x và trục y

Skewx (góc)

Xác định chuyển đổi độ lệch 2D dọc theo trục x

• transform

Skewy (góc)

Xác định chuyển đổi độ lệch 2D dọc theo trục y

Áp dụng chuyển đổi 2D hoặc 3D cho một phần tử

Chuyển đổi-nguồn gốc

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• transform0
• transform1

Cho phép bạn thay đổi vị trí trên các yếu tố được chuyển đổi You will learn about 3D transformations in the next chapter.

Phương pháp biến đổi CSS 2D

Hàm số

Ma trận (N, N, N, N, N, N)

Xác định chuyển đổi 2D, sử dụng ma trận gồm sáu giá trị

dịch (x, y)

Xác định bản dịch 2D, di chuyển phần tử dọc theo trục x và trục y

dịch (n)

Xác định bản dịch 2D, di chuyển phần tử dọc theo trục x

Chuyển dịch (n)

Xác định bản dịch 2D, di chuyển phần tử dọc theo trục y

tỷ lệ (x, y)

Xác định chuyển đổi tỷ lệ 2D, thay đổi chiều rộng và chiều cao của các yếu tố

Scalex (n)

Xác định chuyển đổi tỷ lệ 2D, thay đổi chiều rộng của phần tử

quy mô (n)

Xác định chuyển đổi tỷ lệ 2D, thay đổi chiều cao của phần tử

Xoay (góc)

Xác định vòng quay 2D, góc được chỉ định trong tham số

Skew (X-góc, góc Y)

Xác định chuyển đổi độ lệch 2D dọc theo trục x và trục y

Skewx (góc)

Xác định chuyển đổi độ lệch 2D dọc theo trục x

Skewy (góc)

Xác định chuyển đổi độ lệch 2D dọc theo trục y

Biến đổi CSS 2D

Biến đổi CSS cho phép bạn di chuyển, xoay, tỷ lệ và các phần tử lệch.

Phương thức Skew ()

Phương pháp transform0 làm lệch một phần tử dọc theo trục x và y theo các góc đã cho.

Ví dụ sau đây làm lệch phần tử 20 độ dọc theo trục x và 10 độ dọc theo trục y:

Nếu tham số thứ hai không được chỉ định, nó có giá trị bằng không. Vì vậy, ví dụ sau làm lệch phần tử 20 độ dọc theo trục x:

Phương thức ma trận ()

Phương pháp transform1 kết hợp tất cả các phương thức biến đổi 2D thành một.

Phương thức ma trận () có sáu tham số, chứa các hàm toán học, cho phép bạn xoay, tỷ lệ, di chuyển (dịch) và các phần tử lệch.

Các tham số như sau: Ma trận (scaleX (), Skewy (), Skewx (), scaley (), dịchx (), dịch ())

Tính chất biến đổi CSS

Bảng sau đây liệt kê tất cả các thuộc tính biến đổi 2D:

Phương pháp biến đổi CSS 2D