Làm hiệu ứng hover 3D “khá xịn” với thuộc tính transform

4433
Tạo hiệu ứng hover 3D với transform

Sau một thời gian tiếp xúc và làm việc với CSS, mình muốn thử làm ra một hiệu ứng hover “xịn sò” nhất có thể với những kiến thức đã có. Vậy là sau vài giờ đồng hồ mầy mò kết hợp với một ít Jquery, đây là kết quả mình đạt được.

Các bạn có thể xem lại link đây.

Trong bài viết này mình sẽ hướng dẫn các bạn cách để làm được hiệu ứng như trên.

Phần 1. Chuẩn bị

  Làm hiệu ứng hover 3D "khá xịn" với thuộc tính transform
Điều gì sẽ là “hot” cho lập trình Front-end ( CSS, HTML ) tại Mobifone Global, một công ty mang quy mô công nghệ toàn cầu?”]

Trước tiên, chúng ta tạo ra một element với class .card với tác dụng như một container chứa những element khác. ( Tìm hiểu thêm về element là gì? tại đây )

Để cho dễ nhìn hơn thì chúng ta sẽ style cho body center .card vào giữa màn hình.

Sau đó chúng ta sẽ style cho ảnh và chữ

(Tìm hiểu thêm về CSS là gì? tại đây)

  Làm hiệu ứng hover 3D "khá xịn" với thuộc tính transform
159 chi nhánh trên thế giới, các dự án out-sourcing Transcomos chưa bao giờ ngừng hot” đối với các Front-end Developer (HTML, CSS)”]

Vậy là có được kết quả như sau.

Các bạn có thể xem lại link đây

Nhìn cũng khá ok, nhưng để cho chất hơn nữa chúng ta sẽ bắt tay vào làm hiệu ứng khi hover

Phần 2. Viết Jquery

Trước tiên, chúng ta sẽ detect 2 sự kiện mousemove và mouseleave trong element .card.

Trong sự kiện mousemove chúng ta sẽ tìm đến vị trí con trỏ chuột khi di chuột trong .card sau đó tính toán để áp dụng vào transform.

Sau đó, chúng ta sẽ trả .card. về trạng thái ban đầu sau khi mouseleave

Các bạn có thể xem tại link đây

Lời kết

Vậy là chúng ta đã tạo được ra hiệu ứng hover khá đẹp mắt. Các bạn cứ thoải mái chỉnh sửa để tạo ra được những hiệu ứng chất hơn nhé. Xin cảm ơn

Xem thêm việc làm cho Web Developer tại TopDev

TopDev via viblo.asia

  Responsive HTML bằng một dòng CSS
  HTML5 Web Worker: Truyền dữ liệu
SHARE