Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > [Share code] Sử dụng Translate3d trong CSS vào thiết kế web
[Share code] Sử dụng Translate3d trong CSS vào thiết kế web
Nguyễn Trung Hiếu
Share Code Web Company 2018

[Share code] Sử dụng Translate3d trong CSS vào thiết kế web

HTML5 và CSS3 ra đời làm cho lĩnh vực thiết kế web sang một trang mới. Với CSS3, trang web của bạn có thể có nhiều hiệu ứng đẹp mắt mà không cần phải sử dụng đến ảnh động, nặng nề…Trong bài viết này mình giới thiệu đến các bạn một cách dùng translate3d trong css và một vài ứng dụng dễ làm.

Transform trong CSS3

Định nghĩa

Thuộc tính transform sẽ cho phép bạn chuyển một phần tử sang dạng 2D hoặc 3D với các kiểu như: xoay, co giãn, di chuyển….

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.– Theo W3Schools.com

Cú pháp

transform: none|transform-functions|initial|inherit;
Trong đó, transform-functions nhận các giá trị sau:

giá trị Ý nghĩa
matrix(n,n,n,n,n,n) Định nghĩa một biến đổi 2D sử dụng ma trận 6 số
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Định nghĩa một biến đổi 3D sử dụng ma trận 16 số
translate(x,y) Định nghĩa một chuyển đổi 2D
translate3d(x,y,z) Định nghĩa một chuyển đổi 3D
translateX(x) Định nghĩa một chuyển đổi, áp dụng với trục x
translateY(y) Định nghĩa một chuyển đổi, áp dụng với trục y
translateZ(z) Định nghĩa một chuyển đổi, áp dụng với trục z
scale(x,y) Định nghĩa một chuyển đổi giãn nở 2D
scale3d(x,y,z) Định nghĩa một chuyển đổi giãn nở 3D
scaleX(x) Định nghĩa một chuyển đổi giãn nở theo trục X
scaleY(y) Định nghĩa một chuyển đổi giãn nở theo trục Y
scaleZ(z) Định nghĩa một chuyển đổi giãn nở theo trục Z
rotate(angle) Định nghĩa một chuyển đổi dạng xoay hình 2D
rotate3d(x,y,z,angle) Định nghĩa một chuyển đổi dạng xoay hình 3D
rotateX(angle) Định nghĩa một chuyển đổi dạng xoay hình theo trục X
rotateY(angle) Định nghĩa một chuyển đổi dạng xoay hình theo trục Y
rotateZ(angle) Định nghĩa một chuyển đổi dạng xoay hình theo trục Z
skewX(angle) Định nghĩa một chuyển đổi dạng nghiêng theo trục X
skew(x-angle,y-angle) Định nghĩa một chuyển đổi dạng nghiêng theo trục X và Y
skewY(angle) Định nghĩa một chuyển đổi dạng nghiêng theo trục Y
perspective(n) Định nghĩa một phép phối cảnh cho phần tử 3D

Translate3D là gì

Định nghĩa

Translate3D là một hàm trong CSS dùng để đặt lại vị trí của các phần tử trong không gian 3 chiều.

Cú pháp

translate3d(tx, ty, tz)
Trong đó: tx, ty, tz là chiều dài (hoặc phần trăm) tính theo từng trục.

Demo

Ví dụ minh họa sử dụng translate3d trong css

Thuộc tính này có rất nhiều cách sử dụng và áp dụng vào từng trường hợp riêng. Ví dụ như thiết kế slide có hiệu ứng parallax, hiệu ứng cho thanh menu….

Trong bài này mình giới thiệu đến các bạn cách làm menu có hiệu ứng như hình sau:
gooey menu

Đầu tiên là đoạn HTML. Trong này mình sử dụng cả Bootstrap font để làm mấy cái biểu tượng và SVG để vẽ mấy cái hiệu ứng phụ.

Tiếp theo là đoạn CSS:

Đoạn sau bắt đầu sử dụng giá trị translate3d và các giá trị khác để tăng cường hiệu ứng, các bạn để ý nhé.

Với đoạn code bên trên các bạn có thể lưu thành 2 tập tin (.html và .css) sau đó chạy thử trên trình duyệt để xem kết quả nhé. Như vậy là mình đã giới thiệu các bạn cách sử dụng translate3d trong CSS để tạo hiệu ứng dịch chuyển cho menu cực đẹp. Chúc các bạn thành công!

Các bạn có thể tham khảo thêm tại đây

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}
%d bloggers like this: