2D Transform trong CSS

Transform trong CSS là những thuộc tính dùng để “biến hình” cho các phần tử ban đầu, cho phép chúng ta thay đổi vị trị, hình dáng hay xoay phần tử theo các chiều.

Có 2 kiểu thường gặp là 2D and 3D transformation.

(Transformation là cách gọi chung của hiệu ứng thay đổi hình dạng, kích thước và vị trí của phần tử)

Ở bài viết này, Quantrimang.com sẽ cùng bạn tìm hiểu về 2D Transform, các giá trị, cách sử dụng cũng như những ví dụ cụ thể nhất để bạn dễ dàng hình dung.

2D Transform là gì?

2D Transform là những thuộc tính dùng để xử lý hiệu ứng di chuyển 2D.

Cú pháp để tạo transform như sau:

transform: value;

Các giá trị thường được sử dụng là translate(), rotate(), scale(), skewX(), skewY(), matrix(). Cụ thể như sau:

Giá trị	Mô tả
translate(x,y)	Di chuyển phần tử theo trục x và trục y
translateX(n)	Di chuyển phần tử theo trục x
translateY(n)	Di chuyển phần tử theo trục y
scale(x,y)	Thay đổi độ rộng và chiều cao của phần tử
scaleX(n)	Thay đổi độ rộng của phần tử
scaleY(n)	Thay đổi chiều cao của phần tử
rotate(angle)	Xoay phần tử theo một góc (angle)
skew(x-angle,y-angle)	Định dạng phần tử nghiêng theo một góc
skewX(angle)	Định dạng phần tử nghiêng một góc theo trục x
skewY(angle)	Định dạng phần tử nghiêng một góc theo trục y
matrix(n,n,n,n,n,n)	Tổng hợp giữa scale, skew và translate

Transform translate()

Translate() di chuyển một phần tử từ vị trí hiện tại của nó với các tham số đã cho theo trục X và trục Y. X là dịch theo chiều ngang còn Y là dịch theo chiều dọc.

Ví dụ: Di chuyển phần tử <div> sang phải 100 pixel, lui xuống dưới 50 pixel từ vị trí hiện tại

div {
  -ms-transform: translate(100px,50px); /* IE 9 */
  -webkit-transform: translate(100px,50px); /* Safari */
  transform: translate(100px,50px);

Hình gốc :

(*Các ví dụ trong bài viết đều được transform từ hình này)

Hình đã được dịch chuyển:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: LightSalmon;
  color: #58257b;
  border: 3px solid #58257b;
  -ms-transform: translate(100px,50px); /* IE 9 */
  -webkit-transform: translate(100px,50px); /* Safari */
  transform: translate(100px,50px); /* Standard syntax */
 
</style>
</head>
<body>

<div><h2 style="text-align: center">Website Quản Trị Mạng</h2>
</div>

</body>
</html>

Transform rotate()

Rotate() trong Transform CSS sử dụng để xoay một phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ theo một góc nhất định, đơn vị sử dụng là degree (deg). Góc dương thì xoay theo chiều kim đồng hồ, góc âm thì người lại.

Ví dụ: Xoay phần tử <div> theo chiều kim đồng hồ 20 deg:

div {
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Safari */
  transform: rotate(20deg);

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: LightSalmon;
  color: #58257b;
  border: 3px solid #58257b;
 

div#myDiv {
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Safari */
  transform: rotate(20deg);
 
</style>
</head>
<body>

<div>
  <h2 style="text-align: center">Website Quản Trị Mạng</h2>
</div>

<div id="myDiv">
  <h2 style="text-align: center">Website Quản Trị Mạng</h2>
</div>

</body>
</html>

Transform scale()

Scale() sử dụng để thay đổi độ rộng và chiều cao của phần tử. Hiểu một cách đơn giản là bạn có thể zoom phần tử to lên hoặc nhỏ lại tùy ý, với x là zoom chiều ngang và y là zoom chiều dọc. Scale không có đơn vị mà tính theo tỉ lệ với phần tử gốc, ví dụ 1 là giữ nguyên 2 là tăng lên gấp đôi, 3 là tăng gấp 3…

Ví dụ: Tăng phần tử <div> lên gấp hai lần chiều rộng và ba lần chiều cao ban đầu của nó

div {
  -ms-transform: scale(1.5,2); /* IE 9 */
  -webkit-transform: scale(1.5,2); /* Safari */
  transform: scale(1.5,2);

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 90px;
  width: 300px;
  height: 100px;
  background-color: LightSalmon;
  color: #58257b;
  border: 3px solid #58257b;
 

div#myDiv {
  -ms-transform: scale(2,3); /* IE 9 */
  -webkit-transform: scale(2,3); /* Safari */
  transform: scale(1.5,2); /* Standard syntax */
 
</style>
</head>
<body>

<div>
<h2 style="text-align: center">Website Quản Trị Mạng</h2>
</div>

<div id="myDiv">
<h2 style="text-align: center">Website Quản Trị Mạng</h2>
</div>

</body>
</html>

Transform skewX()

SkewX() làm nghiêng một phần tử theo trục X với góc truyền vào.

Ví dụ: Nghiêng phần tử <div> 30 độ theo trục X:

div {
  -ms-transform: skewX(30deg); /* IE 9 */
  -webkit-transform: skewX(30deg); /* Safari */
  transform: skewX(30deg);

skewX(30deg)

skewX(-30deg)

Transform skewY()

SkewY() làm nghiêng một phần tử theo trục Y với góc truyền vào.

Ví dụ: Nghiêng phần tử <div> 30 độ theo trục Y:

div {
  -ms-transform: skewY(30deg); /* IE 9 */
  -webkit-transform: skewY(30deg); /* Safari */
  transform: skewY(30deg);

skewY(30deg)

skewY(-30deg)

Transform skew()

Skew() là sự kết hợp của cả skewX và skewY, làm nghiêng một phần tử theo cả trục X và Y với góc truyền vào.

Ví dụ: Nghiêng phần tử <div> 30 độ theo trục X và 10 độ theo trục Y.

div {
  -ms-transform: skew(30deg, 10deg); /* IE 9 */
  -webkit-transform: skew(30deg, 10deg); /* Safari */
  transform: skew(30deg, 10deg);

Code đầy đủ:

<!DOCTYPE html>
<html>
<head>
<style> 
body {padding-top:50px 
div {
  margin:auto;
  width: 300px;
  height: 100px;
  background-color: LightSalmon;
  color: #58257b;
  border: 3px solid #58257b;
  -ms-transform: skew(20deg, 10deg); /* IE 9 */
  -webkit-transform: skew(20deg, 10deg); /* Safari */
  transform: skew(30deg, 10deg);
 
</style>
</head>
<body>

<div><h2 style="text-align: center">Website Quản Trị Mạng</h2>
</div>

</body>
</html>

Nếu tham số thứ hai trong skew() không được chỉ định, chương trình sẽ tự động hiểu số đó là x còn y sẽ có giá trị là 0. Vậy ví dụ sau sẽ nghiêng phần tử <div> 20 độ theo trục X:

div {
  -ms-transform: skew(20deg); /* IE 9 */
  -webkit-transform: skew(20deg); /* Safari */
  transform: skew(20deg);

Transform matrix()

Matrix() là kết hợp của tất cả các phương thức 2D Transform, tổng hợp của scale, skew và translate. Matrix() có sáu tham số, chứa các hàm cho phép bạn xoay, zoom và di chuyển phần tử.

Cú pháp của matrix:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Ví dụ:

div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);

Bài trước: Sử dụng Web Font trong CSS

Bài tiếp: 3D Transform trong CSS

Post Views: 201