Chuyển đổi CSS 2D

index.html

<div><p>This is a box that has been scaled.</p></div>

styles.css

div {
	transform: scale(1.5, 1.5);
	background-color: lightblue;
	border: 3px solid black;
}

phải có nền màu xanh lam nhạt và đường viền màu đen đặc rộng 3px. Chúng tôi cũng đã sử dụng phương thức scale () để tăng tỷ lệ hộp của mình lên gấp 1,5 lần kích thước ban đầu của nó.

Đây là hình ảnh so sánh kích thước của hai hộp. Hộp nhỏ nhất không có giá trị scale () và hộp lớn nhất có scale () là 1,5:

Hộp lớn nhất, bao gồm văn bản This is a box that has been scaled. lớn gấp 1,5 lần so với hộp ban đầu của chúng tôi.

Chuyển đổi

scaleX ()

scaleX() phép biến đổi cho phép bạn tăng hoặc giảm chiều rộng của một phần tử. Cú pháp cho phép biến đổi scaleX () là:

transform: scaleX(xValue);


Tham số xValue là số lượng mà bạn muốn chia tỷ lệ chiều rộng của một phần tử. Giả sử bạn có một hộp có chiều rộng bạn muốn tăng thêm một hệ số là 1,6. Bạn có thể tăng kích thước của hộp này bằng cách sử dụng mã sau:

index.html

<div><p>This is a box that has been scaled.</p></div>

styles.css

div {
	transform: scaleX(1.5);
	background-color: lightblue;
	border: 3px solid black;
}

Mã của chúng tôi trả về:

[Code result here]


Trong ví dụ này, chiều rộng của hộp của chúng tôi đã được tăng lên 1,5 lần chiều rộng ban đầu của nó.

Chuyển đổi

scaleY ()

scaleY() phép biến đổi cho phép bạn tăng hoặc giảm chiều cao của một phần tử. scaleY () hoạt động theo cách tương tự như scaleX (), nhưng thay vì ảnh hưởng đến chiều rộng của một phần tử, scaleY () thay đổi chiều cao của phần tử.

Giả sử chúng ta muốn giảm chiều cao của một chiếc hộp xuống còn một nửa chiều cao hiện tại của nó. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

index.html

<div><p>This is a box that has been scaled.</p></div>

styles.css

div {
	transform: scaleY(0.5);
	background-color: lightblue;
	border: 3px solid black;
}

Mã của chúng tôi trả về:

[Code result here]


Trong mã của chúng tôi, chúng tôi đã thu nhỏ chiều cao của hộp (được biểu thị bằng trục y) theo hệ số 0,5. Nói cách khác, hộp của chúng ta bằng một nửa chiều cao ban đầu.

Chuyển đổi

xiên ()

skew() phép biến đổi xiên một phần tử dọc theo trục x và y của nó theo các góc xác định.

Cú pháp của phương thức xiên () như sau:

transform: skew(xValue, yValue);


xValue đề cập đến mức độ lệch của một phần tử trên trục x của nó và yValue đề cập đến mức độ lệch của một phần tử trên trục y của nó. Cả hai giá trị phải được biểu thị bằng độ.

Nếu một giá trị cho yValue không được chỉ định, sẽ không có xiên nào được áp dụng trên trục y.

Giả sử chúng ta muốn xiên một hộp đi 10 độ trên trục x và 15 độ trên trục y của nó. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

index.html

<div><p>This is a box that has been skewed.</p></div>

styles.css

div {
	transform: skew(10deg, 15deg);
	background-color: lightblue;
	border: 3px solid black;
}

Mã của chúng tôi trả về:

Trong ví dụ này, chúng tôi đã làm lệch hộp của mình 10 độ trên trục x và 15 độ trên trục y.

Biến đổi xiên () và xiên Y ()

Giống như scale() phương thức, skew() đi kèm với hai phương thức con được sử dụng để xiên một phần tử qua trục x hoặc y của một phần tử.

Để chỉ xiên một phần tử qua trục X của nó, bạn có thể sử dụng phương thức xiên quay (). Cú pháp của phương thức này như sau:

transform: skewX(xValue);


xValue là số độ trên trục x mà một phần tử sẽ bị lệch.

Để xiên một phần tử qua trục Y của nó, bạn có thể sử dụng phương thức xiên Y (). Cú pháp của phương thức xiên Y () là:

transform: skewY(yValue);


Vì vậy, nếu bạn muốn xiên một phần tử đi 10 độ trên trục Y của nó, bạn có thể sử dụng mã này:

div {
	transform: skewY(10deg);
}

matrix () Chuyển đổi

Ma trận matrix() phép chuyển đổi thực hiện tất cả các phép biến đổi CSS 2D trên một phần tử. Vì vậy, ma trận () có thể được sử dụng để áp dụng các phép biến đổi tịnh tiến, xoay, chia tỷ lệ và xiên.

Hàm ma trận () chấp nhận sáu tham số cho phép bạn áp dụng các phép biến đổi cho một phần tử. Cú pháp của phương thức này như sau:

biến đổi:ma trận (scaleX (), xiênY (), xiên X (), scaleY (), translateX (), translateY ());

Giả sử chúng ta muốn tạo một hộp sử dụng các phép biến đổi sau:

• Thang điểm trên trục X là 1.
• Xéo trên trục Y 10 độ.
• Trục xiên 10 độ trên trục X.
• Thang điểm trên trục Y là 1,25.
• Một chuyển động (“dịch”) trên trục X x 25px.
• Chuyển động trên trục Y x 25px.

Chúng tôi có thể chỉ định từng biến đổi này riêng lẻ. Tuy nhiên, làm như vậy sẽ dẫn đến việc chúng ta phải viết nhiều phép biến đổi riêng biệt. Thay vào đó, chúng ta có thể sử dụng phương thức matrix () để viết các phép biến đổi này bằng một dòng mã.

Đây là mã chúng tôi có thể sử dụng để tạo hộp của chúng tôi với các phép biến đổi nói trên:

index.html

<div><p>This is a box that has been skewed.</p></div>

styles.css

div {
	transform: matrix(1, 10, 10, 1.25, 25, 25);
	background-color: lightblue;
	border: 3px solid black;
}

Mã của chúng tôi trả về:

[Code result here]


Trong mã của chúng tôi, chúng tôi đã áp dụng chuyển đổi xiên, chia tỷ lệ và dịch cho hộp của chúng tôi. Chúng tôi đã thực hiện điều này bằng cách sử dụng phương thức matrix () và bằng cách chuyển các giá trị mà chúng tôi đã chỉ định trước đó.

Kết luận

Thuộc tính biến đổi được sử dụng để áp dụng các phép biến đổi cho một phần tử trong CSS. CSS cung cấp một số biến đổi 2D, bao gồm xiên, chia tỷ lệ, xoay và dịch, được sử dụng để biến đổi các phần tử web.

Hướng dẫn này đã khám phá, với tham chiếu đến các ví dụ, kiến ​​thức cơ bản về chuyển đổi CSS 2D. Bây giờ, bạn đã sẵn sàng để bắt đầu tạo các chuyển đổi 2D của riêng mình như một nhà phát triển web chuyên nghiệp.