CSS3: transform 2D

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Thuộc tính transform của CSS3 sẽ cho phép bạn có thể tạo các hiệu ứng xoay chuyển hai chiều (2D) và ba chiều (3D) trên các phần tử HTML.

Dưới đây ta sẽ tìm hiểu các phương thức tạo hiệu ứng xoay chuyển transform 2D (2 chiều).

Trình duyệt hỗ trợ

Các trình duyệt IE10+, FireFox, Chrome, Safari và Opera đều hỗ trợ thuộc tính transform.

Phương thức translate()

Phương thức translate() cho phép di chuyển một phần tử từ vị trí này tới vị trí khác mà không cần thiết lập thuộc tính position cho phần tử đó.

Cú pháp: transform:translate(hoành_độ,tung_độ);

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#tran1,#id1{

width:100px;

height:100px;

background:green;

color:white;

text-align:center;

}

#id1:hover #tran1{

transform:translate(100px,100px); /* Chuyển div tới tọa độ (100,100) */

-ms-transform:translate(200px,200px); /* IE9+ */

-webkit-transform:translate(200px,200px); /* Safari và Chrome */

-o-transform:translate(200px,200px); /* Opera */

-moz-transform:translate(200px,200px); /* FireFox */

}

</style>

</head>

<body>

<div id="id1">

<div id="tran1">Chạm đây => Dịch chuyển</div>

</div>

</body>

</html>

Lưu ý: Bạn có thể sử dụng phướng thức translateX(x) (transform:translateX(150px) chẳng hạn) để chuyển phần tử tới vị trí có tọa độ (x,0) và phương thức translateY(y) (transform:translateY(200px) chẳng hạn) để chuyển phần tử tới vị trí có tọa độ (0,y).

Phương thức rotate()

Phương thức rotate() cho phép quay phần tử đi một góc với tâm quay chính là trọng tâm của phần tử, trục quay là trục Oz.

Cú pháp: transform:rotate(ndeg);

, trong đó n là giá trị góc bạn muốn quay phần tử, deg (độ) là đơn vị thể hiện góc quay; nếu n>0 thì phần tử sẽ quay cùng chiều kim đồng hồ, nếu n<0 thì phần tử sẽ quay ngược chiều kim đồng hồ.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#xoay{

width:100px;

height:100px;

background-color:green;

color:white;

text-align:center;

}

#xoay:hover{

transform:rotate(30deg);

-ms-transform:rotate(30deg);

-webkit-transform:rotate(30deg);

-o-transform:rotate(30deg);

-moz-transform:rotate(30deg);

}

</style>

</head>

<body>

<div id="xoay">Chạm đây => Xoay</div>

</body

</html>

Phương thức scale()

Phương thức này được dùng để thay đổi kích thước của phần tử theo chiều rộng và chiều cao theo tỷ lệ nằm trong phần đối số của phương thức.

Cú pháp: transform:scale(scale_x,scale_y);

, trong đó scale_x là tỷ lệ chiều rộng, scale_y là tỷ lệ chiều cao, chẳng hạn scale_x=2, scale_y=4 có nghĩa là tăng chiều rộng lên 2 lần và tăng chiều cao lên 4 lần.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#scalexy{

width:100px;

height:80px;

background-color:green;

color:white;

padding:2px;

}

#scalexy:hover{

margin:100px;

transform:scale(2,4); /* Tăng chiều rộng 2 lần, chiều cao 4 lần */

-ms-transform:scale(2,4); /* IE 9 */

-webkit-transform:scale(2,4); /* Safari và Chrome */

}

</style>

</head>

<body>

<div id="scalexy">Chạm đây => Tăng chiều rộng 2 lần, chiều cao 4 lần</div>

</body>

</html>

Lưu ý: Bạn có thể sử dụng phướng thức scaleX(x) (transform:scaleX(3) chẳng hạn) để thay đổi tỷ lệ về chiều rộng và phương thức scaleY(y) (transform:scaleY(5) chẳng hạn) để thay đổi tỷ lệ về chiều cao.

Phương thức skew()

Phương thức skew() sẽ xô nghiêng phần tử đi một góc theo cả chiều ngang và chiều dọc.

Cú pháp: transform: skew(xdeg,ydeg);

, trong đó x và y lần lượt là các góc xô theo chiều ngang và chiều dọc, nếu x>0 thì sẽ xô ngang phần trên của phần tử sang trái và phần dưới của phần tử sang phải (tức là xoay chiều dọc của phần tử một góc xdeg ngược chiều kim đồng hồ), x<0 thì sẽ xô ngang theo các hướng ngược lại, nếu y>0 thì xô dọc phần trái của phần tử lên trên và phần phải của phần tử xuống dưới (tức là xoay chiều ngang của phần tử đi một góc ydeg theo chiều kim đồng hồ), y<0 thì xô dọc theo các hướng ngược lại.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#xongang,#xodoc,#xocahai{

width:100px;

height:75px;

background-color:green;

text-align:center;

border:red thin solid;

color:white;

}

#xongang:hover{

transform:skew(30deg,0deg); /*xô ngang 30 độ */

-ms-transform:skew(30deg,0deg); /* IE 9 */

-webkit-transform:skew(30deg,0deg); /* Safari và Chrome */

}

#xodoc:hover{

transform:skew(0deg,30deg); /*xô dọc 30 độ */

-ms-transform:skew(0deg,30deg); /* IE 9 */

-webkit-transform:skew(0deg,30deg); /* Safari và Chrome */

}

#xocahai:hover{

transform:skew(30deg,30deg); /*xô ngang 30 độ và xô dọc 30 độ*/

-ms-transform:skew(30deg,30deg); /* IE 9 */

-webkit-transform:skew(30deg,30deg); /* Safari và Chrome */

}

</style>

</head>

<body>

<div id="xongang">Chạm đây => Xô ngang</div>

<div id="xodoc">Chạm đây => Xô dọc</div>

<div id="xocahai">Chạm đây => Xô cả ngang và dọc</div>

</body>

</html>

Lưu ý: Bạn có thể sử dụng phướng thức skewX(xdeg) (transform:skewX(30deg) chẳng hạn) để xô ngang và phương thức skewY(ydeg) (transform:skewY(30deg) chẳng hạn) để xô dọc.

» Tiếp: transform 3D
« Trước: repeating-radial-gradient()
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!