----
Áp dụng nhiều
transform
Có thể áp dụng một lúc nhiều hàm của transform lên một phần
tử. Chỉ việc liệt kê các hàm và giá trị tương ứng, mỗi hàm cách nhau một khoảng
trắng.
Cú pháp,
transform:
function(value) function(value);
Ví dụ, luật CSS sau sẽ làm cho hình ảnh to thêm một chút,
nghiêng một chút, và dịch chuyển xuống dưới, sang phải một chút, khi rê chuột
lên nó.
img:hover {
transform:
scale(1.5) rotate(-5deg) translate(50px, 30px);
}
Xem hình minh họa,
Các hàm của transform được thực hiện theo đúng thứ tự trong
danh sách, hàm nào liệt kê trước sẽ được thực hiện trước.
Khi thực hiện transform trên một phần tử ở nhiều trạng thái
(ví dụ, lần một ở trạng thái bình thường, lần hai khi rê chuột lên), thì các
transform đã áp dụng ở lần trước sẽ bị mất, sau khi thực hiện transform lần tiếp
theo.
Ví dụ,
Transform lần 1,
a {
transform: rotate(45deg);
}
Transform lần 2,
a:hover {
transform: scale(1.25); /* trạng thái xoay hình sẽ bị mất */
}
Để duy trì transform của các lần trước, cần lặp lại nó ở lần
transform sau. Ví dụ,
Transform lần 1,
a {
transform: rotate(45deg);
}
Transform lần 2,
a:hover {
transform: rotate(45deg) scale(1.25); /* vừa xoay vừa phóng to */
}
Lưu ý, để đơn giản, ở các phần minh họa về transform đã lược
bớt đi phần tiền tố của các trình duyệt (-webkit-,
-ms-, -moz-, -o-), khi viết mã trong thực tế cần thêm các tiền tố này.
Kết hợp transition và
transform
Nếu để ý sẽ thấy, quá trình thực hiện transform diễn ra ngay
tức khắc, điều này làm hiệu ứng không được mượt mà. Để khắc phục điều này, cần
kết hợp thêm transition vào quá trình transform. Thực hiện bài thực hành Lab
2.7b để thấy được sự kết hợp này.
Lab 2.7 b (exercise 17-2, p.416 [3])
Transfom 3-D
Để tìm hiểu về transform 3-D, sẽ thực hiện trên các hình ảnh.
Dưới đây là đoạn mã HTML hiển thị hình ảnh trong bài Lab 2.7b.
[HTML]
<ul>
<li><a href=""><img
src="anchovies.jpg" id="img1"
alt=""></a></li>
<li><a href=""><img
src="jellyfish1.jpg" id="img2"
alt=""></a></li>
<li><a href=""><img
src="bluejellyfish.jpg" id="img3"
alt=""></a>
</li>
<li><a href=""><img
src="seadragon.jpg"
id="img4"alt=""></a></li>
</ul>
Việc đầu tiên cần làm là thêm đặc tính “perspective” (nghĩa là phối cảnh 3-chiều) vào phần tử chứa
(trong trường hợp này là phần tử ul).
Điều này báo cho trình duyệt biết rằng, các phần tử con (trong trường hợp này
là các phần tử li) sẽ được xem như
đang làm việc trong môi trường 3-D.
ul {
width: 1000px;
height: 100px;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-perspective: 600;
-moz-perspective: 600;
perspective: 600;
}
Giá trị của perspective là một số nguyên (integer), lớn hơn
0. Đây chính là khoảng cách từ hình gốc tới trục Oz. Cứ tưởng tượng, không gian
3-D được biểu diễn bởi hệ trục tọa độ Oxyz, Ox là trục ngang, Oy là trục đứng,
Oz là trục sâu (đi từ màn hình tới mắt người dùng). Giá trị perspective càng nhỏ,
thì nhìn hình càng “sâu”. Giá trị hợp lý thường nằm trong khoảng 300 đến 1500, thực
tế, cần điều chỉnh giá trị này, rồi quan sát kết quả trên trình duyệt, để được
trạng thái phù hợp.
Để thiết lập môi trường 3-D, còn có hai thuộc tính nữa, đó
là perspective-origin dùng để thiết lập
vị trí của mắt nhìn, và backface-visibility
dùng để thiết lập chế độ quan sát mặt sau khi xoay phần tử.
Sau khi đã thiết lập môi trường 3-D cho phần tử cha, có thể thực hiện các hàm transform trên các phần tử con. Các hàm transform gồm: translate3d, translateZ, scale3d, scaleZ, rotate3d, rotateX, rotateY, rotateZ, và matrix3d. Trong đó, để ý đến các hàm có chữ “Z”, đó là các biến đổi hình theo trục Oz.
Ví dụ, xoay các ảnh 45 độ theo trục Ox,
li {
float: left;
margin-right:
10px;
-webkit-transform: rotateX(45deg);
-moz-transform:
rotateX(45deg);
transform:
rotateX(45deg);
}
Xem hình minh họa,
Ví dụ, xoay các ảnh 45 độ theo trục Oy,
li {
float: left;
margin-right:
10px;
-webkit-transform: rotateY(45deg);
-moz-transform:
rotateY(45deg);
transform:
rotateY(45deg);
}
2.7.3 Keyframe Animation
Animation là hoạt hình, nghĩa là tạo ra sự chuyển động dựa
trên các hình tĩnh. Ví dụ, chuyển động nghiêng đầu của một người, có thể được tạo
ra bằng nhiều hình tĩnh, mỗi hình là một tư thế khác nhau của đầu (hình đầu
tiên là đầu ở tư thế thẳng, các hình tiếp theo là tư thế nghiêng dần về một
bên). Khi cho các hình tĩnh này “đi qua” mắt người quan sát, do cơ chế lưu ảnh
trong võng mạc, sẽ tạo ra cảm giác hình chuyển động. Càng nhiều hình, với nhiều
góc nghiêng liên tiếp nhau, sẽ tạo ra hành động nghiêng đầu càng thật, chuyển động
càng mượt mà.
Trong phần transition, đã tìm hiểu về việc thay đổi trạng
thái của một phần tử. Tuy nhiên, chỉ gồm hai trạng thái (đầu, và cuối). Với
animation, để tạo ra một hoạt hình, cần nhiều trạng thái hơn, mỗi trạng thái
này sẽ được định nghĩa bằng các keyframe. Một frame được hiểu là một khung
hình. Keyframe là các khung hình chính.
Để tạo ra một hoạt hình, cần hai bước. Một là thiết lập các
keyframe, hai là gắn thuộc tính animation vào phần tử.
Thiết lập các
keyframe
Để đơn giản, sẽ thực hiện thiết lập các keyframe để đổi màu
nền liên tục cho một phần tử.
@keyframes colors {
0% { background-color: red; }
20% { background-color: orange; }
40% { background-color: yellow; }
60% { background-color: green; }
80% { background-color: blue; }
100% { background-color: purple; }
}
Ý nghĩa của luật @keyframes ở trên là: tạo ra một hoạt hình
có tên là colors, hoạt hình này sẽ đổi
màu nền liên tục, bắt đầu là màu đỏ, cuối cùng là màu tím. Thời gian đổi từ màu
này sang màu khác sẽ cách nhau 20% tổng thời gian xác định trước.
Cú pháp chung của keyframes là,
@keyframes animation-name {
keyframe { property:
value; }
keyframe { property: value; }
}
Nếu một @keyframes chỉ gồm hai trạng thái thì có thể sử dụng
cú pháp đơn giản như sau:
@keyframes animation-name {
from { property:
value; }
to { property:
value; }
}
Ví dụ,
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
Gắn animation vào phần
tử
Sau khi đã định nghĩa keyframes, có thể gắn nó vào một hoặc
nhiều phần tử HTML. Để gắn keyframes vào phần tử, sử dụng các thuộc tính animation-*, cách làm tương tự như khi
thiết lập transition.
Ví dụ, tạo một phần tử div với id = “magic”,
<div id="magic">Magic</div>
Một số thuộc tính của animation-* giống với transition,
– animation-name:
xác định tên animation sẽ áp dụng
– animation-duration:
thời gian thực hiện animation
– animation-timing-function:
cách thức thực hiện animation
– animation-delay:
thiết lập độ trễ
Thêm một số thuộc tính khác của animation-*,
– animation-iteration-count:
số lần lặp lại của animation
– animation-direction:
hướng thực thi các keyframe, theo chiều xuôi, theo chiều ngược, hoặc xuôi rồi
ngược, hoặc ngược rồi xuôi
– animation-play-state:
thiết lập trạng thái cho animation, chạy (running) hay không chạy (paused)
– animation-fill-mode: xác định chế độ định dạng cho phần tử,
khi animation không thực thi
Đoạn mã CSS sau sẽ thiết lập animation có tên là colors cho div#magic, thời gian thực hiện
một animation là 5s, kiểu animation
là linear, animation được lặp lại
liên tục, và thứ tự thực thi các keyframe là xuôi rồi ngược.
div#magic {
animation-name: colors;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Sử dụng thuộc tính animation
để viết mã CSS gọn hơn. Ví dụ đoạn mã trên có thể viết lại như sau,
div#magic {
animation: colors 5s linear infinite alternate;
}
Muốn di chuyển một phần tử trên trang web, có thể thiết lập
keyframes để thay đổi vị trí của phần tử bằng hàm translate của transform.
-----------
Cập nhật [11/8/2018]
-----------
Xem thêm: Học làm web (55) - CSS căn bản (31)