CSS 2D Transforms

0
33

CSS transforms cho phép bạn di chuyển, xoay, chia tỷ lệ và làm lệch vị trí ban đầu của các phần tử.

Các phương thức CSS 2D Transforms.

Với thuộc tính transforms, bạn có thể sử dụng các phương thức sau:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

Phương thức translate().

  • Phương thức translate() di chuyển một phần tử từ vị trí hiện tại của mình (theo các thông số đưa ra cho các trục X và trục Y).
  • Ví dụ sau di chuyển phần tử <div> 50 pixel sang bên phải và 100 pixel xuống từ vị trí hiện tại của nó:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); /* IE 9 */
  transform: translate(50px,100px); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Di chuyển phần tử <div> 50 pixel sang bên phải và 100 pixel xuống từ vị trí hiện tại của nó
</div>

</body>
</html>

Phương thức rotate().

  • Phương thức  rotate() cho phép quay một chiều kim đồng hồ nguyên tố hoặc truy cập chiều kim đồng hồ theo một mức độ nhất định.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  -ms-transform: rotate(20deg); /* IE 9 */
  transform: rotate(20deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Đây là div mặc định.
</div>

<div id="myDiv">
Đây là div bị lệch đi 20 độ.
</div>

</body>
</html>

Phương thức scale().

  • Phương thức scale() làm tăng hoặc giảm kích thước của một phần tử (theo các thông số đưa ra cho chiều rộng và chiều cao).
  • Ví dụ sau đây làm tăng phần tử <div> lên hai lần chiều rộng ban đầu và ba lần chiều cao ban đầu:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scale(2,3); /* IE 9 */
  transform: scale(2,3); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Phần tử <div> tăng lên hai lần chiều rộng ban đầu và ba lần chiều cao ban đầu:
</div>

</body>
</html>

Phương thức scaleX().

  • Phương thức scaleX() làm tăng hoặc giảm chiều rộng của phần tử.
  • Ví dụ sau đây tăng phần tử <div> lên hai lần chiều rộng ban đầu của nó:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scaleX(2); /* IE 9 */
  transform: scaleX(2); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Phần tử div tăng lên 2 lần về chiều rộng.
</div>

</body>
</html>
  • Ví dụ sau giảm phần tử <div> xuống còn một nửa chiều rộng ban đầu của nó:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scaleX(0.5); /* IE 9 */
  transform: scaleX(0.5); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Phần tử div giảm một nửa chiều rộng.
</div>

</body>
</html>

Phương thức scaleY().

  • Phương thức scaleY() làm tăng hoặc giảm chiều cao của phần tử.
  • Ví dụ sau tăng phần tử <div> lên ba lần chiều cao ban đầu của nó:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scaleY(3); /* IE 9 */
  transform: scaleY(3); /* Standard syntax */
}
</style>
</head>
<body>

<div>
Phần tử div tăng 3 lần chiều cao.
</div>

</body>
</html>
  • Ví dụ sau giảm phần tử <div> xuống còn một nửa chiều cao ban đầu của nó:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scaleY(0.5); /* IE 9 */
  transform: scaleY(0.5); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Phần tử div bị giảm 1 nửa chiều cao.
</div>

</body>
</html>

Phương thức skewX().

  • Phương thức skewX() làm lệch một yếu tố dọc theo trục X bởi các góc độ nhất định.
  • Ví dụ sau làm nghiêng phần tử <div> 20 độ dọc theo trục X:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  -ms-transform: skewX(20deg); /* IE 9 */
  transform: skewX(20deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Đây là phần tử div bình thường.
</div>

<div id="myDiv">
Phần tử div nghiêng 20 độ theo trục x.
</div>

</body>
</html>

Phương thức skewY().

  • Phương thức skewY() làm lệch một yếu tố dọc theo trục Y theo góc độ nhất định.
  • Ví dụ sau làm nghiêng phần tử <div> 20 độ dọc theo trục Y:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  -ms-transform: skewY(20deg); /* IE 9 */
  transform: skewY(20deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Đây là phần tử div bình thường.
</div>

<div id="myDiv">
Phần tử div nghiêng 20 độ theo trục Y.
</div>

</body>
</html>

Phương thức skew().

  • Phương thức skew() làm lệch một yếu tố dọc theo X và trục Y bởi những góc nhất định.
  • Ví dụ sau làm nghiêng phần tử <div> 20 độ dọc theo trục X và 10 độ dọc theo trục Y:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  -ms-transform: skew(20deg,10deg); /* IE 9 */
  transform: skew(20deg,10deg); /* Standard syntax */
}
</style>
</head>
<body>



<div>
Đây là phần tử div bình thường.
</div>

<div id="myDiv">
Phần tử div nghiêng 20 độ theo trục X và 10 độ theo trục Y.
</div>

</body>
</html>
  • Lưu ý : Nếu tham số thứ hai không được chỉ định, nó có giá trị bằng không.

Phương thức matrix().

  • Phương thức matrix() gộp tất cả các phương thức ở trên làm một.
  • Phương thức matrix () nhận sáu tham số, chứa các hàm toán học, cho phép bạn di chuyển, xoay, chia tỷ lệ và làm lệch vị trí ban đầu các phần tử.
  • Các tham số như sau: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY().

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv1 {
  -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); 
  transform: matrix(1, -0.3, 0, 1, 0, 0); 
}

div#myDiv2 {
  -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); 
  transform: matrix(1, 0, 0.5, 1, 150, 0); 
}
</style>
</head>
<body>
<div>
Đây là div mặc định.
</div>

<div id="myDiv1">
Sử dụng matrix().
</div>

<div id="myDiv2">
Sử dụng matrix().
</div>

</body>
</html>

CÁC THUỘC TÍNH CỦA CSS Transforms.

  • Bảng sau cho biết các thuộc tính của CSS Transforms:
Thuộc tínhGiải thích
transformÁp dụng chuyển đổi 2D hoặc 3D cho một phần tử
transform-originCho phép bạn thay đổi vị trí trên các phần tử đã chuyển đổi

TỔNG HỢP PHƯƠNG THỨC CSS Transforms.

  • Bảng sau tổng hợp lại các phương thức:
Phương thứcGiải thích
matrix(n,n,n,n,n,n)

Xác định phép biến đổi 2D, sử dụng ma trận gồm sáu giá trị

translate(x,y)

Xác định phép tịnh tiến 2D, di chuyển phần tử dọc theo trục X và trục Y

translateX(n)

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

translateY(n)

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

scale(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 phần tử
scaleX(n)Xác định chuyển đổi tỷ lệ 2D, thay đổi chiều rộng của phần tử
scaleY(n)Xác định chuyển đổi tỷ lệ 2D, thay đổi chiều cao của phần tử
rotate(angle)Xác định góc quay 2D, góc được chỉ định trong tham số
skew(x-angle,y-angle)Xác định phép biến đổi xiên 2D dọc theo trục X và trục Y
skewX(angle)

Xác định phép biến đổi xiên 2D dọc theo trục X

skewY(angle)Xác định phép biến đổi xiên 2D dọc theo trục Y

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây