----
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: Học làm web (54) - CSS căn bản (30)