Làm thế nào để sử dụng tốt nhất Transform trong CSS?

Trong bài này chúng ta sẽ hiểu về Transform In chi tiết và theo dõi nó với một minh chứng thực tế chi tiết. Các gợi ý sau sẽ được đề cập trong bài viết này,

• CSS chuyển đổi là gì?
• Các thuộc tính biến đổi khác nhau là gì?

Với sự tiến bộ trong các chức năng của trang web, điều quan trọng không kém là cung cấp các tích hợp thông minh trên trang web của bạn để làm cho nó hấp dẫn và tốt hơn. Việc thêm các phần tử CSS khác nhau để khen ngợi trang web của bạn là nhu cầu hàng ngày.
Mọi người tránh xa các trang web không thực sự thu hút số đông. Vì vậy, hãy thử chuyển đổi một số phần tử và làm đẹp CSS của bạn với giá trị nén thấp hơn.
Để đáp ứng các nhu cầu tương tự, chúng tôi có thuộc tính CSS chuyển đổi để biến đổi các phần tử bằng cách xiên, xoay, chia tỷ lệ hoặc dịch chúng.

Tiếp tục với bài viết này về Chuyển đổi trong CSS

CSS chuyển đổi là gì?

Chuyển đổi một phần tử CSS có nghĩa là cung cấp cho nó một lợi thế ở dạng 2D hoặc 3D. Nó thay đổi trực quan kiểu dáng của một phần tử.
Phép biến đổi 2D hoạt động trên trục X và Y. Bạn có thể cung cấp bất kỳ cạnh hoặc cấu trúc nào trên cả hai trục để thực hiện thay đổi. Trong khi để chuyển đổi 3D, nó cần hoạt động trên các trục X, Y cũng như Z để cung cấp độ sâu cần thiết.

Thuộc tính biến đổi CSS 2D:

Thuộc tính biến đổi CSS 3D:

Ví dụ:

css .element {width: 20px height: 20px converter: scale (20)}

Bây giờ, khi bạn làm như vậy, phần tử được xác định sẽ được chia tỷ lệ 20 lần.

Không chỉ vậy, bạn cũng có thể chia tỷ lệ trục khôn ngoan để mở rộng tỷ lệ ngang và tỷ lệ dọc.

biến đổi: scaleX (2) biến đổi: scaleY (.5)

Để cung cấp một chuyển đổi thích hợp trên tất cả các trình duyệt, bạn có thể:

div {-webkit-biến đổi: quy mô (1.5) -moz-biến đổi: quy mô (1.5) -o-biến đổi: quy mô (1.5) biến đổi: quy mô (1.5)}

Thuộc tính CSS chuyển đổi cải thiện không gian tọa độ của cấp định dạng trực quan CSS.
Mức định dạng trực quan là gì?
Mức định dạng trực quan có nghĩa là xử lý một tài liệu và trình bày trực quan tài liệu đó trên các nền tảng phương tiện. Với định dạng trực quan, bạn có thể chuyển đổi từng phần tử thành một mô hình phù hợp với mô hình hộp CSS. Mô hình hộp CSS xác định một phần tử ở định dạng hình hộp chữ nhật tiêu chuẩn xác định kích thước, vị trí và thuộc tính.
Ghi chú: Chỉ các phần tử có thể biến đổi mới được chuyển đổi.

Tiếp tục với bài viết này về Chuyển đổi trong CSS

Các thuộc tính biến đổi khác nhau là gì?

Hãy xem xét tất cả các thuộc tính biến đổi:

1.scale (): Chia tỷ lệ có nghĩa là thay đổi kích thước của phần tử theo chiều ngang hoặc chiều dọc.

Đối với quy mô dọc:scaleX

Để chia tỷ lệ ngang:quy môY

Đối với một phần tử, bạn cũng có thể thay đổi kích thước phông chữ, phần đệm, chiều cao hoặc chiều rộng. Giá trị mặc định là 1 cũng có nghĩa là cung cấp 0,5 vì giá trị giảm một nửa trong khi cung cấp 2 nhân đôi tỷ lệ.

2. xiên (): Thuộc tính Skew cho phép người dùng nghiêng một phần tử sang phải hoặc trái từ một điểm tọa độ. Nó gần giống như việc biến một hình chữ nhật thành một hình bình hành. Bạn có thể xiên một phần tử theo tọa độ của nó.

Thí dụ:

.element {biến đổi: xiên X (25deg)} .element {biến đổi: xiên Y (25deg)

Khi bạn làm như vậy, phần tử sẽ nghiêng 25 độ theo chiều ngang và chiều dọc bằng cách sử dụng xiên X hoặc xiênY.

3. xoay ( ) : Bạn có thể xoay một phần tử theo chiều kim đồng hồ bằng cách sử dụng thuộc tính này. Bạn có thể xoay nó 180 độ hoặc 360 độ để đưa nó trở lại vị trí ban đầu.

.element {biến đổi: xoay (25deg)}

Để cung cấp khả năng xoay, bạn có thể sử dụng bất kỳ kích thước nào trong ba kích thước: xoayX, xoayY hoặc xoayZ.

4. dịch ( ) : Bạn có thể di chuyển một phần tử lộn ngược hoặc sang một bên đúng cách.

.element {biến đổi: dịch (20px, 10px)}

Dịch sẽ di chuyển một đối tượng / phần tử được chỉ định lộn ngược hoặc sang một bên. Giá trị được chỉ định đầu tiên di chuyển đối tượng sang phải (âm sẽ di chuyển nó sang trái) và giá trị thứ hai di chuyển nó xuống (chỉ định một giá trị âm sẽ di chuyển nó lên trên).

Nếu điều này có thể làm bạn bối rối, hãy áp dụng trục X để thay đổi vị trí của phần tử theo chiều ngang và trục Y để thay đổi vị trí theo chiều dọc. Khía cạnh tuyệt vời nhất về thuộc tính biến đổi là việc áp dụng biến đổi sẽ chỉ cho phép phần tử di chuyển, giữ nguyên mọi phần tử hoặc văn bản khác. Khoảng cách thường được tính bằng pixel hoặc phần trăm.

Ví dụ:

.element {biến đổi: translateX (giá trị) biến đổi: translateY (giá trị)}

5. perspective (): Bạn có thể cung cấp chiều sâu trong phối cảnh của một phần tử. Nó cho phép chuyển đổi 3D cho một phần tử bằng cách biến nó thành hình khối trong quá trình chuyển đổi.
dịch3d (x, y, z)
dịchZ (z)

translate3d (x, y, z) translateZ (z)

Sự ra đời của trục z cung cấp cho phần tử một hình ảnh 3D. translateZ () di chuyển phần tử về phía người xem trong khi giá trị âm sẽ di chuyển phần tử đó đi.

6. ma trận () : Kết hợp tất cả các phép biến đổi thành một.

xoay (45deg) dịch (24px, 25px)

Áp dụng ma trận () kết hợp tất cả các thuộc tính biến đổi trong một mảng.

đợi và thông báo trong java

Việc áp dụng các thuộc tính chuyển đổi có thể nâng cao đáng kể yếu tố của bạn và do đó trang web của bạn hấp dẫn. Hãy thử chúng!

Đến đây chúng ta sẽ kết thúc bài viết này về Transform In CSS.

Nếu bạn muốn tìm hiểu thêm về phát triển web, hãy xem của Edureka. Đào tạo Chứng chỉ Phát triển Web sẽ giúp bạn Học cách tạo các trang web ấn tượng bằng cách sử dụng HTML5, CSS3, Twitter Bootstrap 3, jQuery và Google API và triển khai nó cho Amazon Simple Storage Service (S3).

Nếu bạn vẫn quan tâm Nếu bạn có bất kỳ câu hỏi nào, bạn có thể đăng câu hỏi đó trong phần bình luận của blog “CSS là gì” và chúng tôi sẽ liên hệ lại với bạn trong thời gian sớm nhất.