[CSS Căn bản] Tìm hiểu về thuộc tính chuyển đổi transform trong CSS3

Cập nhật lần cuối: 01 Tháng Tư 2018

CSS cơ bản

3,186 Lượt xem

CSS3 ra đời đã giúp việc design giao diện website trở nên tuyệt vời hơn. Với hàng tá các thuộc tính hỗ trợ điều khiển hiển thị. Trong bài viết này mình sẽ giới thiệu với bạn thuộc tính chuyển đổi transform trong CSS3 để biến các phần tử thành 2D hoặc 3D, cùng với các kiểu hiển thị xoay, nghiên, di chuyển,…

Cú pháp và cách sử dụng transform

Mỗi trình duyệt lại có những thuộc tính transform khác nhau, và khi thiết kế bạn lưu ý phải đưa tất cả các thuộc tính của các trình duyệt vào để tránh lỗi.

Cú pháp của Transform: transform: giá trị;

Bạn có thể sử dụng các thành phần bổ trợ thuộc tính để xác định thành phần đó được hỗ trợ trên trình duyệt nào. Ví dụ bạn muốn thuộc tính tác động đến đội tượng trong trình duyệt Chrome, Safari, Opera thì thêm vào -webkit- ví dụ như: -webkit-transform: rotate(7deg);, với IE thì là: -ms-transform: rotate(7deg);, và với Firefox thì là -moz-transform: rotate(7deg); và nếu bạn muốn sử trên tất cả thì chỉ cần thuộc tính transform là đủ.

Sử dụng thuộc tính transform tương tự như các thuộc tính khác trong CSS, tuy nhiên khi sử dụng transform bạn phải xác định rõ thành phần tác động cũng như trình duyệt thực thi.

Một số hiển thị ví dụ về transform trong CSS

Các giá trị của thuộc tính transform

Transform có rất nhiều giá trị để tùy chỉnh. Dưới đây là bảng mô tả về các giá trị của thuộc tình transform.

Giá trị	Ví dụ	Giải thích
`none`	transform:none;	Không có sự thay đổi
`matrix(n,n,n,n,n,n)`	transform:matrix(0.866,0.5,-0.5,0.866,0,0);	Định nghĩa 2D sử dụng 6 chỉ số.
`matrix3d` `(n,n,n,n,...,n,n,n,n)`	transform: matrix3d(2,1.2,4,1,3,2.1,5,1,3,2,5,2,2,1,1,1);	Định nghĩa 2D sử dụng ma trận 4×4 với 16 chỉ số.
`translate(x,y)`	transform:translate(50px,50px);	Định nghĩa 2D sử dụng tọa độ X-Y
`translate3d(x,y,z)`	transform:translate3d(50px,50px,50px);	Định nghĩa 3D sử dụng tọa độ X-Y-Z
`translateX(x)`	transform:translateX(-25px);	Định nghĩa dịch chuyển theo trục X
`translateY(y)`	transform:translateY(-25px);	Định nghĩa dịch chuyển theo trục Y
`translateZ(z)`	transform:translateZ(-25px);	Định nghĩa dịch chuyển 3D theo trục Z
`scale(x,y)`	transform:scale(1.5,1.5);	Định nghĩa biến dạng 2D theo trục X-Y
`scale3d(x,y,z)`	transform:scale3d(1.5,1.5,1.5);	Định nghĩa biến dạng 3D theo trục X-Y-Z
`scaleX(x)`	transform:scaleX(1.5);	Định nghĩa biến dạng 2D theo trục X
`scaleY(y)`	transform:scaley(1.5);	Định nghĩa biến dạng 2D theo trục Y
`scaleZ(z)`	transform:scalez(1.5);	Định nghĩa biến dạng 3D theo trục Z
`rotate(angle)`	transform:rotate(90deg);	Xoay đối tượng theo độ, tối đa 360deg
`rotate3d(x,y,z,angle)`	transform: rotate3d(1,2,6,35deg);	Kết hợp xoay với biến dạng 3D theo trục X-Y-Z
`rotateX(angle)`	transform:rotateX(40deg);	Định nghĩa quay 3D theo trục X
`rotateY(angle)`	transform:rotateY(40deg);	Định nghĩa quay 3D theo trục Y
`rotateZ(angle)`	transform:rotateZ(40deg);	Định nghĩa quay 3D theo trục Z
`skew(x-angle,y-angle)`	transform:skew(20deg,20deg);	Định nghĩa nghiêng 2D theo trục X-Y
`skewX(angle)`	transform:skewX(10deg));	Định nghĩa nghiêng 2D theo trục X
`skewY(angle)`	transform:skewY(10deg));	Định nghĩa nghiêng 2D theo trục Y

Để sử dụng thành thạo thuộc tính này bạn phải thực hành nhiều và nắm bắt được các thông số tọa độ để điều hướng dễ dàng. Với transform bạn có thể tạo ra giao diện với nhiều hình dạng 2D, 3D giúp trang web trở nên sinh động và chuyên nghiệp hơn.

Trong bài sau mình sẽ chia sẻ với bạn về thuộc tính hoạt hình animation trong CSS3.