Biến đổi có nghĩa là gì trong CSS?

Bạn đã bao giờ tự hỏi làm thế nào ba dấu chấm trên một trang web nhấp nháy nhanh như vậy chưa? . Thuộc tính CSS Transform áp dụng chuyển động, xoay, nghiêng và chia tỷ lệ cho các phần tử HTML ở dạng 2D hoặc 3D. Thuộc tính transition giúp sự thay đổi diễn ra suôn sẻ và nhanh chóng

Nếu bạn đang cố gắng làm cho dự án của mình có tính tương tác, thì bạn nên biết về cặp đôi quyền lực này để giữ cho hoạt ảnh của bạn nhất quán và khó nắm bắt. Tốt nhất là tránh các sự cố tương thích giữa các trình duyệt có thể làm phức tạp thiết kế của bạn

Vậy, sự khác biệt giữa CSS Transform và CSS Transition là gì?

Trong blog này, chúng tôi sẽ đi sâu vào các thuộc tính Chuyển đổi và Chuyển đổi CSS sẽ giúp bạn tạo hoạt ảnh đơn giản và thú vị với ít dòng mã hơn

Bạn mới sử dụng Bộ chọn CSS?

Hãy bắt đầu với Chuyển đổi và chuyển đổi CSS

Thuộc tính chuyển đổi CSS

Thuộc tính Transform trong CSS được gọi khi có sự thay đổi trạng thái của phần tử HTML. Bạn có thể xoay, nghiêng, di chuyển và chia tỷ lệ các phần tử. Nó xảy ra khi trạng thái của một phần tử bị sửa đổi, chẳng hạn như khi bạn di chuột qua nút hoặc thực hiện nhấp chuột. Chúng ta sẽ xem cách thức hoạt động của nó trong các phần tiếp theo của blog này

Có ba biến thể của thuộc tính CSS Transform trong 2D

1. biến đổi. TpropertyX(x);
2. biến đổi. TpropertyY(y);
3. biến đổi. Tproperty(x,y);

Ở đây Tproperty đề cập đến thuộc tính phần tử bạn muốn thay đổi, x và y có thể là giá trị âm hoặc dương. Thuộc tính CSS Transform trong 3D bao gồm trục Z. X là chiều rộng, Y là chiều cao và Z là chiều sâu của màn hình

Dịch

Thuộc tính Translate thay đổi vị trí trái/phải và lên/xuống của phần tử trên trang dựa trên các tham số trục X (ngang) và Y (dọc) đã cho. Tham số trục X dương di chuyển phần tử sang phải và âm sẽ di chuyển sang trái. Tham số trục Y dương di chuyển phần tử xuống dưới và trục dương di chuyển phần tử lên trên

HTML

CSS

màu nền. rgb(55, 255, 5, 0. 582);

biên giới. rắn rgb(110, 235, 110) 4px;

#hộp. di chuột { biến đổi. dịch(100%,60%);}

Khi lơ lửng

Trong ví dụ trên, hộp sẽ di chuyển từ vị trí ban đầu sang phải 100% và xuống 60% vì cả hai đều là tham số dương

Đọc. 12 kỹ thuật CSS hiện đại cho các vấn đề CSS cũ hơn

Nghiêng

Skew nghiêng phần tử theo hướng dựa trên các tham số được cung cấp cho trục X và Y của nó. Tham số X dương nghiêng nó về phía phải và âm nghiêng nó về phía trái. Đồng thời, Y dương nghiêng nó xuống và âm nghiêng nó lên trên

HTML

CSS

màu nền. rgb(246, 200, 250, 0. 932);

biên giới. rắn rgb(246, 169, 253) 4px;

#hộp. di chuột { biến đổi. nghiêng(30deg,30deg);

Khi lơ lửng

Trong ví dụ trên, hộp đã được nghiêng sang phải và hướng lên trên vì cả hai đều là tham số dương

Nếu bạn làm lệch một phần tử, nó cũng sẽ làm lệch tất cả các phần tử con tồn tại bên trong phần tử đó. Nếu chúng ta cần duy trì góc ban đầu của phần tử con, chúng ta sẽ phải sử dụng giá trị ngược lại của skew để giữ nguyên góc đó

Tỉ lệ

Tỷ lệ có thể tăng hoặc giảm kích thước của phần tử HTML dựa trên các tham số đã cho. Giá trị dương tăng kích thước theo hướng X hoặc Y, trong khi giá trị âm giảm kích thước theo hướng X hoặc Y

Nói một cách đơn giản, new_size = tham số * original_size;

HTML

CSS

màu nền. rgba(172, 221, 243, 0. 842);

biên giới. rắn rgb(172, 221, 243) 4px;

#hộp. di chuột { biến đổi. tỷ lệ (0. 5);}

Khi lơ lửng

Trong ví dụ trên, kích thước hộp đã được thu nhỏ lại một nửa so với kích thước ban đầu

Quay

Thuộc tính xoay có thể xoay một phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ dựa trên một số độ được chỉ định. Độ dương xoay phần tử theo hướng ngược chiều kim đồng hồ và thông số âm xoay phần tử theo chiều kim đồng hồ

HTML

CSS

màu nền. rgba(247, 169, 169, 0. 788);

biên giới. rắn rgb(247, 169, 169) 4px;

#hộp4. di chuột { biến đổi. xoay (25 độ);}

Khi lơ lửng

Trong ví dụ trên, hộp được xoay 25 độ ngược chiều kim đồng hồ khi tham số dương

Ngoài những điều này, chúng ta có thể kết hợp nhiều thuộc tính biến đổi CSS cho một phần tử. Bạn sẽ cần chỉ định các thuộc tính mà bạn muốn thay đổi

Ví dụ. biến đổi. prop1(tham số) prop2(tham số);

Chúng ta hãy xem một ví dụ. Tôi đã thêm thuộc tính chuyển đổi ở đây. Chúng ta sẽ tìm hiểu thêm về nó trong các phần tiếp theo

HTML

CSS

màu nền. rgba(247, 169, 169, 0. 788);

biên giới. rắn rgb(247, 169, 169) 4px;

biến đổi. tỷ lệ xoay (120deg) (1. 5) dịchY(-100px);

Khi lơ lửng

Các phép biến đổi mà không cần thêm hiệu ứng chuyển tiếp diễn ra nhanh chóng trong tích tắc. Chúng tôi sẽ khắc phục điều này trong phần tiếp theo bằng cách thêm một số hiệu ứng chuyển tiếp vào cùng

Đọc. 15 kỹ thuật CSS nâng cao để thành thạo vào năm 2021

Khả năng tương thích trình duyệt của CSS Transforms

Chúng ta hãy xem tính tương thích của thuộc tính CSS Transform trên các trình duyệt khác nhau

Sử dụng trình duyệt LT để kiểm tra độ phản hồi của các trang web được xây dựng bằng CSS Transforms And Transition

Sau khi triển khai thuộc tính CSS Transforms và Before Transitions trong trang web của mình, bạn sẽ cần thực hiện kiểm tra khả năng phản hồi để kiểm tra cách các thuộc tính này hiển thị ở các kích thước và độ phân giải màn hình khác nhau. Bạn có thể tận dụng Trình duyệt LT để kiểm tra Chuyển đổi và Chuyển đổi CSS cho các trang web và ứng dụng web của mình trên các chế độ xem khác nhau như điện thoại di động, máy tính bảng, máy tính để bàn và máy tính xách tay. Để bắt đầu, bạn có thể tham khảo video hướng dẫn LT Browser bên dưới

Dưới đây là một số tính năng tuyệt vời được cung cấp bởi LT Browser

• Điều chỉnh mạng để kiểm tra các trang web trên các điều kiện mạng khác nhau
• Đồng bộ hóa các thiết bị để đồng bộ hóa các cuộn trên nhiều chế độ xem của thiết bị sao cho việc cuộn trên một chế độ xem sẽ cuộn cùng một lượng trên một chế độ xem khác
• Báo cáo hiệu suất để tối ưu hóa hiệu suất trang web tổng thể
• Mô phỏng con trỏ chuột để bắt chước hành vi chạm của thiết bị thực và hơn thế nữa

Dưới đây là một số lý do thuyết phục Tại sao các nhà phát triển nên sử dụng LT Browser

TẢI XUỐNG TRÌNH DUYỆT LT

LT Browser vượt trội trong việc cung cấp tất cả các tính năng cần thiết khi thử nghiệm web di động và thử nghiệm phản hồi. Các nhà phát triển có thể tận dụng các tính năng thiết yếu do LT Browser cung cấp để kiểm tra và gỡ lỗi các trang web và ứng dụng web của họ trên các chế độ xem thiết bị khác nhau

Thuộc tính chuyển tiếp CSS

Chúng ta đã thấy các thuộc tính CSS Transform khác nhau thay đổi trạng thái của phần tử theo cách trực quan như thế nào. Bây giờ, thuộc tính Chuyển tiếp thêm dần dần vào trạng thái đã thay đổi đó. Quá trình chuyển đổi sẽ trở nên suôn sẻ trong một khoảng thời gian nhất định

Cần có ba thuộc tính chính để quá trình chuyển đổi có hiệu lực

1. chuyển đổi tài sản
2. thời gian chuyển tiếp
3. thời gian chuyển tiếp

Bạn phải chỉ định thuộc tính của phần tử bạn muốn thay đổi và khoảng thời gian thay đổi đó sẽ diễn ra. Chức năng thời gian và thuộc tính trễ là tùy chọn

chuyển tiếp. [thuộc tính] [thời lượng] [chức năng thời gian] [độ trễ];

chuyển đổi tài sản

Thuộc tính chuyển đổi xác định thuộc tính CSS nơi chuyển đổi qua phần tử sẽ được áp dụng. Chúng tôi cũng có thể áp dụng chuyển đổi cho một thuộc tính duy nhất (e. g. , màu nền hoặc biến đổi) hoặc cho tất cả các thuộc tính trong bộ quy tắc

chuyển đổi tài sản. biến đổi;

thời gian chuyển tiếp

Thuộc tính transition-duration xác định khoảng thời gian của quá trình chuyển đổi trên phần tử. Chúng tôi có thể chỉ định bằng giây hoặc mili giây

div { thời lượng chuyển tiếp. 4s;

Dưới đây là ví dụ mã của thuộc tính CSS Transition

HTML

CSS

đầu ra

Hãy xem xét ví dụ Chuyển đổi tỷ lệ với thuộc tính Chuyển tiếp được thêm vào

HTML

.square

CSS

lai lịch. màu ngọc lam đậm;

đầu ra

thời gian chuyển tiếp

Thuộc tính transition-timing-function chỉ định tốc độ của quá trình chuyển đổi trong suốt thời lượng của phần tử. Thời gian mặc định rất dễ dàng, bắt đầu chậm, tăng tốc ngay lập tức và sau đó giảm dần ở cuối

Các tùy chọn thời gian khác bao gồm dễ dàng, dễ dàng vào, dễ dàng ra, dễ dàng vào và tuyến tính

Dưới đây là một ví dụ về các tùy chọn thời gian khác nhau (được sử dụng với biến đổi. dịch thuộc tính

HTML

CSS

biến đổi. translateX(200px);

lai lịch. PaleTurquoise;

chuyển tiếp. tất cả 1. 5s tuyến tính;

chuyển tiếp. tất cả 1. dễ dàng 5s;

chuyển tiếp. tất cả 1. 5s dễ dàng ra ngoài;

lai lịch. màu ngọc lam trung bình;

chuyển tiếp. tất cả 1. 5s dễ dàng ra vào;

chuyển tiếp. tất cả 1. 5s khối bezier(0,1,. 98,0);

đầu ra

Như chúng ta có thể thấy, hộp giảm dần tỷ lệ dưới một giây

Bạn có thể chỉ định một loại chuyển đổi duy nhất cho tất cả các thuộc tính như trong ví dụ hoặc bạn có thể chỉ định các chuyển đổi khác nhau cho từng thuộc tính như sau

transition: p1 d1, p2 d2, …, pn dn;

Trong đó pn chỉ định tên thuộc tính và dn chỉ định thời lượng

Bây giờ, hãy xem cách chúng tôi có thể thử và làm cho quá trình chuyển đổi hoạt động trên tất cả các trình duyệt. Chúng tôi sẽ sử dụng tiền tố nhà cung cấp cho cùng

Xem xét ví dụ trên, đây là giao diện của tiền tố nhà cung cấp

Tại đây -webkit cho Chrome, Safari;

màu nền. rgb(140, 212, 245);

-webkit-chuyển tiếp. tất cả 1 giây;

#hộp. di chuột { biến đổi. tỷ lệ (0. 5);}

Chỉ định tiền tố của nhà cung cấp đảm bảo rằng các chuyển đổi hoạt động ngay lập tức trên các trình duyệt thường được đối tượng mục tiêu sử dụng

cũng đọc. Bảng cheat bộ chọn CSS cơ bản mà bạn phải biết

Khả năng tương thích trình duyệt của thuộc tính CSS Transition

Hãy cùng xem khả năng tương thích của CSS Transition trên các trình duyệt

Hãy xem một ví dụ về lật thẻ

HTML

bên này
nói gì đó

CSS

hoạt hình-thời gian-chức năng. dễ dàng trong;

biến đổi. xoayY(90deg) rotateX(-15deg);

hoạt hình-thời gian-chức năng. thả lỏng;

biến đổi. xoayY(180 độ);

hoạt hình. lật thẻ 3s 1s xen kẽ vô hạn;

phong cách biến đổi. bảo quản-3d;

/* khác nhau, để hiển thị các lỗi khác nhau */

khả năng hiển thị backface. ẩn giấu;

lai lịch. rgba(0, 0, 128, 0. 6);

bán kính đường viền dưới cùng bên trái. 0;

bán kính đường viền dưới cùng bên phải. 0;

bán kính đường viền trên cùng bên trái. 0;

bán kính đường viền trên cùng bên phải. 0;

phong cách biến đổi. bảo quản-3d;

lai lịch. rgba(192, 192, 0, 0. 6);

biến đổi. xoayY(180 độ);

viền-phải-màu. trong suốt;

màu-dưới-đường viền. trong suốt;

Kiểm tra khả năng tương thích giữa các trình duyệt của trang web của bạn thay vì lưu trữ nó trên mỗi trình duyệt web có thể rất rườm rà. Không thể tải xuống và cài đặt nhiều loại trình duyệt và phiên bản trình duyệt cho thiết bị hoặc hệ điều hành đích

Đây là lúc các công cụ kiểm tra trình duyệt chéo như LambdaTest có thể giúp kiểm tra trang web và ứng dụng web của bạn về tính tương thích của trình duyệt trên các kết hợp trình duyệt và nền tảng khác nhau

Để kiểm tra khả năng tương thích giữa nhiều trình duyệt, chỉ cần chọn cấu hình và nhấn Bắt đầu

gói nó lên

Các nhà phát triển front-end giờ đây có thể dễ dàng tạo các trang web động và hấp dẫn tương thích với trình duyệt được tải bằng các hiệu ứng hình ảnh mà không cần sử dụng JavaScript, nhờ các thuộc tính Chuyển đổi và Chuyển đổi CSS3. Trong bài đăng này, chúng ta đã tìm hiểu cách các thuộc tính Chuyển đổi và Chuyển tiếp trong CSS có thể cùng nhau thêm hoạt ảnh tương tác mượt mà vào trang web của bạn

Chúng tôi hy vọng bạn thấy bài đăng này hữu ích. Ngoài ra, nếu bạn có bất kỳ Chuyển đổi hoặc chuyển đổi CSS hấp dẫn nào để chia sẻ, chúng tôi rất muốn nghe ý kiến ​​của bạn trong phần nhận xét

chuyển đổi dịch là gì (

Mã chuyển đổi có nghĩa là gì?

Việc sử dụng nguồn gốc biến đổi trong CSS là gì?

Tại sao dịch biến đổi được sử dụng?