Kết hợp transition và transform trong css3 để tạo hiệu ứng đẹp mắt

Theo xu hướng thiết kế web ngày nay, các lập trình viên thường sử dụng CSS3 để tạo ra các hiệu ứng đẹp mắt cho trang web của mình. Bạn có thể bắt gặp ở rất nhiều trang web, nhưng hiệu ứng chuyển động khi bạn di chuột qua một vị trí nào đó. Ví dụ như hình ảnh được phóng to, những màu sắc từ từ thay đổi khi bạn di chuột qua vị trí nào đó.... Tất cả những hiệu ứng giống hoặc tương tự như thế, hoàn toàn có thể được lập trình bằng CSS3, chỉ với các thuộc tính transition và transform. Trong bài viết này, tôi sẽ cố gắng để giúp các bạn hiểu rõ hơn về hai thuộc tính này trong CSS3.

Thuộc tính Transform:

Thuộc tính transform sẽ giúp chúng ta có thể di chuyển, xoay, phóng to... một thành phần trong trang web. Chúng ta có thể biến đổi thành phần đó theo dạng 2D hoặc 3D.

 Các bạn có thể thấy trong bức hình trên đã thể hiện được tác dụng của thuộc tính transform trong css3.

• rotate:

 rotate là một giá trị của transform, nó có thể làm quay vật thể với một góc được xác định theo chiều 2D hoặc 3D.

- rotate 2D:

Code HTML:

<div></div>
<div class="rotate"></div>

Code CSS:

div{
    background:red;
    width:100px;
    height:100px;
    float:left;
    margin: 50px 20px;
}
.rotate{
    transform:rotate(30deg);/* Xoay div theo góc 30 độ */
    -webkit-transform:rotate(30deg);/* dùng cho chrome và safari */
    -ms-transform:rotate(30deg); /* dùng cho IE 9 trở lên */
}

Kết quả:

- rotate 3D:

Code HTML:

<div></div>
<div class="rotateX"> rotate X 180 độ</div>
<div class="rotateY"> rotate Y 180 độ</div>
<div class="rotateZ"> rotate Z 45 độ</div>

Code CSS:

div{
    background:red;
    width:100px;
    height:100px;
    float:left;
    margin: 50px 15px;
}
.rotateX{
    transform:rotateX(180deg);/* Xoay theo phương X một góc 180 độ */
    -webkit-transform:rotateX(180deg);
    -ms-transform:rotateX(180deg);
}
.rotateY{
    transform:rotateY(180deg); /* Xoay theo phương Y một góc 180 độ */
    -webkit-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
}
.rotateZ{
    transform:rotateZ(45deg); /* Xoay theo phương Z một góc 45 độ */
    -webkit-transform:rotateZ(45deg);
    -ms-transform:rotateZ(45deg);
}

Kết quả:

• Scale:

Giá trị scale của thuộc tính transform cho phép chúng ta phóng to hoặc thu nhỏ đối tượng theo cả chiều ngang và chiều dọc.

Code HTML:

<div></div>
<div class="scale">tăng 1,5 lần</div>
<div class="scaleXY">tăng chiều rộng 1,5 lần và chiều dọc 2,5 lần</div>

Code CSS:

div{
    background:red;
    width:100px;
    height:100px;
    float:left;
    margin: 100px 30px 0 30px;
}
.scale{
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -ms-transform:scale(1.5);
}
.scaleXY{
    transform:scale(1.5,2.5);
    -webkit-transform:scale(1.5,2.5);
    -ms-transform:scale(1.5,2.5);
}

Kết Quả:

• Skew:

Giá trị skew cho phép chúng ta thực hiện việc quay nghiêng đối tượng theo một góc xác định, theo trục X hoặc trục Y hoặc cả trục X và trục Y.

Code HTML:

<div class="skew">nghiêng theo trục X và Y một góc 45 độ</div>
<div class="skewX">nghiêng theo trục X một góc 45 độ</div>
<div class="skewY">nghiêng theo trục Y một góc 45 độ</div>

Code CSS:

div{
    background:red;
    width:100px;
    height:100px;
    float:left;
    margin: 100px 30px 0 30px;
}
.skew{
    transform:skew(30deg,30deg);
    -webkit-transform:skew(30deg,30deg);
    -ms-transform:skew(30deg,30deg);
}
.skewX{
    transform:skewX(45deg);
    -webkit-transform:skewX(45deg);
    -ms-transform:skewX(45deg);
}
.skewY{
    transform:skewY(45deg);
    -webkit-transform:skewY(45deg);
    -ms-transform:skewY(45deg);
}

Kết quả:

 

• Translate:

Giá trị translate, cho phép chúng ta dịch chuyển vật thể theo trục x và trục y một khoảng xác định.

Code HTML:

<div></div>
<div class="translate">dịch chuyển theo chiều ngang 90px và dọc 30px</div>
<div class="translateX">Dịch chuyển theo chiều ngang -90px (sang trái) </div>
<div class="translateY">Dịch chuyển theo chiều dọc 90px</div>

Code CSS:

div{
    background:red;
    width:100px;
    height:100px;
    position:absolute;
    left: 100px;
    top:100px;
    border: 1px solid #111;
    opacity:0.7;
}
.translate{
    transform:translate(90px,30px);
    -webkit-transform:translate(90px,30px);
    -ms-transform:translate(90px,30px);
}
.translateX{
    transform:translateX(-90px);
    -webkit-transform:translateX(-90px);
    -ms-transform:translateX(-90px);
}
.translateY{
    transform:translateY(90px);
    -webkit-transform:translateY(90px);
    -ms-transform:translateY(90px);
}

Kết quả:

Transition :

Thuộc tính transition, cho phép xác định một quá trình chuyển đổi của vật thể theo một thời gian được lập trình trước thông qua các giá trị của nó.
Các giá trị của transition bao gồm:
- transition-property: xác định các đặc tính css của đối tượng như width, height... các đặc tính được viết cách nhau bởi dấu phẩy (,) , hoặc có thể dùng "all" để xác định tất cả các đặc tính.
- transition-duration: xác định thời gian thực hiện quá trình chuyển đổi thuộc tính css của đối tượng, đơn vị tính là giây (s).
- transition-timing-function: là hiệu ứng của quá trình chuyển đổi, bao gồm các hiệu ứng sau

•  ease: hiệu ứng khởi đầu chậm sau đó nhanh dần và kết thúc chậm
• ease-in: hiệu ứng với một khởi đầu chậm chạp
• ease-out: hiệu ứng với một kết thúc chậm
• ease-in-out: hiệu ứng với khởi đầu và kết thúc chậm
• linear: hiệu ứng có cùng một tốc độ từ lúc bắt đầu đến khi kết thúc
• cubic-bezier(n,n,n,n): xác định giá trị của hiệu ứng theo từng giai đoạn, giá trị xác định của từng giai đoạn chỉ có thể từ 0 đến 1.

- transition-delay: xác định độ trễ của hiệu ứng
thuộc tính transition có thể được viêt tắt như sau:

transition: "transition-property" "transition-duration" "transition-timing-function" "transition-delay" ;
ví dụ: div{transition: all 0.6s ease-in-out 0.2s}
nghĩa là khi thuộc tính css của thẻ div thay đổi thì sẽ diễn ra trong thời gian 0.6s với hiệu ứng chậm và có độ trễ là 0.2s

Xem demo

Bây giờ, bạn có thể kết hợp transition và transform để sáng tạo ra những hiệu ứng đẹp mắt cho mình rồi. Các bạn có thể xem thêm một số hiệu ứng css3 đẹp mắt trong những bài viết trước của mình.
Bài viết cũng khá dài, mình xin phép dừng lại tại đây hy vọng qua bài này các bạn sẽ hiểu hơn về CSS3 và vận dụng nó một cách thành thạo hơn.