Học làm web (53) - CSS căn bản (29)

Tiếp theo của: Học làm web (52) - CSS căn bản (28)
----

2.7.2       CSS transform


Transform nghĩa là biến đổi. Trong CSS, transform được sử dụng để thực hiện việc biến đổi hình. Bao gồm các kiểu biến đổi: xoay hình (rotate), xê dịch hình (relocate, translate), thay đổi kích thước (resize, scale), và nghiêng hình (slant, skew). Có thể thực hiện biến đổi hình hai chiều (2-D) và ba chiều (3-D).

Xem hình minh họa,




Sau đây là một số đặc tính của transform,

– Giá trị: hàm transform | none

– Mặc định: none

– Áp dụng: các phần tử hỗ trợ transform

– Kế thừa: không

Có thể áp dụng transform cho phần tử ở trạng thái bình thường (trong mã nguồn), và kết quả của transform sẽ được hiển thị khi trình duyệt tải trang web.

Khi một phần tử được transform, không gian (hay vị trí) gốc của nó vẫn được giữ nguyên trên giao diện, và vẫn ảnh hưởng đến bố cục trang. Điều này giống như khi thiết lập chế độ hiển thị là relative. Vì vậy, nếu dùng transform để dịch chuyển một phần tử, thực chất là đang di chuyển “cái ảnh” của nó.

Có thể thực hiện transform trên các phần tử sau,

– Các phần tử có nội dung được thay thế (replaced content) như: img, canvas, các form input, media

– Các phần tử được thiết lập kiểu hiển thị là display: block

– Các phần tử có kiểu hiển thị là inline-block

– Các phần tử có kiểu hiển thị là inline-table và table-*

Xoay hình

Xoay hình (rotate) là làm “hình hiển thị” lệnh đi một góc so với vị trí ban đầu. Hãy tưởng tượng, trong không gian hai chiều, hình được đặt trên hệ trục tọa độ Oxy, toàn bộ mặt phẳng là 360 độ, nếu xoay hình theo chiều kim đồng hồ thì gọi là xoay một góc dương, ngược lại gọi là góc âm.

Cú pháp của xoay hình là,

transform:  rotate(góc xoay)

Ví dụ sau sẽ xoay hình ngược chiều kim đồng hồ một góc 10 độ (degree), nói cách khác là xoay cùng chiều kim đồng hồ 350 độ,

img {
width: 300px;
height: 400px;
transform: rotate(-10deg); /*hoặc transform: rotate(350deg) */
}

Xem hình minh họa,



Thay đổi điểm gốc

Điểm gốc là một điểm của hình, nó được cố định khi thực hiện xoay hình. Mặc định, điểm gốc nằm ở tâm của hình. Tuy nhiên, có thể thay đổi điểm gốc bằng thuộc tính transform-origin.

Sau đây là một số đặc tính của transform-origin,

– Giá trị: percentage | length | left | center | right | top | bottom

– Mặc định: 50% 50%

– Áp dụng: các phần tử có hỗ trợ transform

– Kế thừa: không

Giá trị của transform-origin gồm hai thành phần, một là độ dời (offset) theo chiều ngang, hai là độ dời theo chiều dọc (lấy góc trên, bên trái của phần tử làm mốc). Nếu chỉ cung cấp một giá trị, thì giá trị này sẽ được dùng cho cả chiều ngang và chiều dọc.

Ví dụ, để đổi điểm gốc thành điểm giữa, cạnh trên (center top), có thể sử dụng một trong ba luật CSS sau,

transform-origin: center top;
transform-origin: 50%, 0%;
transform-origin: 150px, 0;

Hình sau minh họa cùng một góc xoay hình (25 độ), tuy nhiên điểm gốc đã bị thay đổi,



Lưu ý, trong phần này, đã minh họa điểm gốc trên việc xoay hình cho dễ hiểu, tuy nhiên, việc thay đổi điểm gốc có thể thực hiện trên các kiểu biến đổi hình còn lại, như xê dịch hình, thay đổi kích thước, và nghiêng hình.

Xê dịch hình

Để tạo hiệu ứng “hình hiển thị” bị xê dịch tới vị trí khác so với vị trí gốc của nó, có thể sử dụng một trong ba hàm sau của transform,

– Hàm translateX dùng để xê dịch hình theo chiều ngang

– Hàm translateY dùng để xê dịch hình theo chiều dọc

– Hàm translate dùng để xê dịch hình theo hai chiều, thực chất là gộp của hai hàm trên, translate(translateX, translateY)

Ví dụ,

transform: translateX(50px);
transform: translateY(25px);
transform: translate(50px, 25px);

Khoảng cách xê dịch được xác định bằng các đơn vị đo chiều dài của CSS. Với đơn vị đo là %, nó sẽ được tính dựa trên khoảng cách giữa hai border của chính phần tử xê dịch. Nếu giá trị xê dịch là dương, chiều xê dịch sẽ là sang phải hoặc xuống dưới, ngược lại, nếu giá trị xê dịch là âm, chiều xê dịch sẽ là sang trái hoặc lên trên. Với hàm translate(), nếu chỉ cung cấp một giá trị, thì giá trị còn lại sẽ được ngầm hiểu là 0. Ví dụ translate(20px, 0) sẽ tương đương với translateX(20px), và translateY(0).

Xem hình minh họa,



Thay đổi kích thước hình

Để tạo hiệu ứng “hình hiển thị” to hơn hoặc nhỏ hơn so với kích thước gốc của nó, có thể sử dụng một trong ba hàm sau của transform,

– Hàm scaleX dùng để thay đổi kích thước chiều ngang

– Hàm scaleY dùng để thay đổi kích thước chiều dọc

– Hàm scale dùng để thay đổi kích thước theo cả hai chiều, thực chất là gộp của hai hàm trên, scale(scaleX, scaleY)

Giá trị cung cấp cho hàm scale chính là tỉ lệ thay đổi so với kích thước gốc.

Ví dụ, luật CSS sau sẽ làm cho “hình hiển thị” có chiều ngang lớn hơn 150% so với chiều ngang gốc,

a img {
transform: scaleX(1.5);
}

Ví dụ, luật CSS sau sẽ làm cho “hình hiển thị” có chiều ngang lớn hơn 2 lần, và chiều cao bằng một nửa so với kích thước gốc,

a img {
transform: scale(2, .5);
}

Khác với hàm translate(), đối với hàm scale(), nếu chỉ cung cấp một giá trị, thì giá trị đó sẽ được sử dụng cho cả hai chiều. Ví dụ scale(2) sẽ tương đương với scaleX(2), và scaleY(2).

Xem hình minh họa,



Nghiêng hình

Để tạo hiệu ứng “hình hiển thị” bị nghiêng so với hình gốc của nó, có thể sử dụng một trong ba hàm sau của transform,

– Hàm skewX dùng để nghiêng hình theo chiều ngang

– Hàm skewY dùng để nghiêng hình theo chiều dọc

– Hàm skew dùng để nghiêng hình theo cả hai chiều, thực chất là gộp của hai hàm trên, skew(skewX, skewY)

Giá trị cung cấp cho hàm skew là góc nghiêng. Đối với hàm skew, nếu chỉ cung cấp một giá trị, thì giá trị đó sẽ là của skewX, trong khi giá trị của skewY sẽ là 0.

Ví dụ,

a img {
transform: skewX(15deg);
}
a img {
transform: skewY(30deg);
}
a img {
transform: skew(15deg, 30deg);
}


Xem hình minh họa,



-----------
Cập nhật [8/8/2018]
-----------
Xem thêm: Tổng hợp các bài viết về Học làm web
Xem thêm: Học làm web (54) - CSS căn bản (30)