Bài 43: HTML và CSS từ Zero đến Hero(Bài 20 CSS)

  

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,

Á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);

}

Xem hình minh họa,

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.