Chúng ta có thể sử dụng quá trình chuyển đổi và biến đổi trong CSS không?

Cho dù bạn có thích hoạt ảnh CSS hay không, thì việc học cách làm việc với các biến đổi và chuyển tiếp CSS có thể giúp ích cho trải nghiệm người dùng tổng thể trên trang web của bạn

Hãy xem cách bắt đầu

biến đổi

Thuộc tính biến đổi trong CSS cung cấp cho bạn khả năng biến đổi các phần tử ở dạng 2D hoặc 3D. Các phép biến đổi phổ biến nhất được sử dụng để thay đổi các phần tử là

.skew:hover{
   transform: skew(-10deg)
/* transform: skew(-10deg, 20deg); */
/* transform: skewX(-10deg); */
/* transform: skewY(20deg); */
}

.skew:hover{
   transform: skew(-10deg)
/* transform: skew(-10deg, 20deg); */
/* transform: skewX(-10deg); */
/* transform: skewY(20deg); */
}

.skew:hover{
   transform: skew(-10deg)
/* transform: skew(-10deg, 20deg); */
/* transform: skewX(-10deg); */
/* transform: skewY(20deg); */
}

.skew:hover{
   transform: skew(-10deg)
/* transform: skew(-10deg, 20deg); */
/* transform: skewX(-10deg); */
/* transform: skewY(20deg); */
}

Quay

cú pháp

.rotate:hover {
  transform: rotate(10deg);
  /* transform: rotateY(90deg); */
  /* transform: rotateX(-90deg); */
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Khi xoay một phần tử, bạn có thể xoay trên cả trục X và Y hoặc chỉ trục X hoặc Y. Bạn cũng có thể xoay độ dương hoặc độ âm

Nghiêng

cú pháp

.skew:hover{
   transform: skew(-10deg)
/* transform: skew(-10deg, 20deg); */
/* transform: skewX(-10deg); */
/* transform: skewY(20deg); */
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Thuộc tính này làm lệch một phần tử trên mặt phẳng 2D
Có một tốc ký sử dụng một hoặc hai giá trị
Bạn cũng có thể ghi cụ thể nếu muốn xiên theo trục X hoặc Y
Thuộc tính skew nghiêng phần tử sang phải hoặc trái

Dịch

cú pháp

.translate:hover {
  /* transform: translate(100px); */
  /* transform: translateX(100px); */
   transform: translateY(100px);
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nếu bạn muốn di chuyển một phần tử trên trang web, bạn sử dụng thuộc tính translate. Thuộc tính này di chuyển một phần tử sang trái và phải, lên và xuống hoặc cả hai

Ghi chú. nếu bạn muốn di chuyển một phần tử lên trên, bạn sử dụng số âm trên trục Y. Điều này có thể gây nhầm lẫn khi bạn lần đầu tiên bắt đầu tạo hoạt ảnh trên web

Tỉ lệ

cú pháp

.scale:hover {
  /* transform: scale(1.2); */
  /* transform: scale(1.2, 0.5); */
  /* transform: scaleX(2); */
     transform: scaleY(0.5);
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Thuộc tính scale tăng hoặc giảm tỷ lệ phần tử tùy thuộc vào giá trị. Một giá trị lớn hơn một tỷ lệ phần tử lên. Một giá trị dưới đây quy mô nó xuống. Về mặt kỹ thuật, bạn có thể sử dụng số âm nhưng nó dẫn đến một số biến đổi kỳ lạ. Nó không chia tỷ lệ phần tử mà thực sự lật nó theo chiều dọc

chuyển tiếp

Tất cả các ví dụ trên cũng có thuộc tính chuyển đổi trên đó

Trong khi các phép biến đổi di chuyển hoặc thay đổi diện mạo của một phần tử, thì các hiệu ứng chuyển tiếp làm cho phần tử chuyển đổi trơn tru và dần dần từ trạng thái này sang trạng thái khác

Nếu không có thuộc tính chuyển đổi trong các ví dụ trên, các phép biến đổi mà tôi đã sử dụng sẽ nhanh chóng và đột ngột. Bạn có thể nhận xét thuộc tính chuyển tiếp trên phần tử img để xem ý tôi là gì

Thuộc tính chuyển đổi là thuộc tính tốc ký được sử dụng để biểu thị tối đa bốn thuộc tính tốc ký liên quan đến chuyển đổi

• chuyển đổi tài sản
• thời gian chuyển tiếp
• chức năng thời gian chuyển đổi
• độ trễ chuyển tiếp

thuộc tính chuyển tiếp

Thuộc tính này chỉ định tên hoặc tên của các thuộc tính CSS mà bạn cũng đang áp dụng quá trình chuyển đổi. Bạn cũng có thể sử dụng từ khóa

.skew:hover{
   transform: skew(-10deg)
/* transform: skew(-10deg, 20deg); */
/* transform: skewX(-10deg); */
/* transform: skewY(20deg); */
}

img {
  transition-property: transform;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

hoặc là

img {
  transition-property: all;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

thời lượng chuyển tiếp

Thuộc tính này chỉ định khoảng thời gian mà quá trình chuyển đổi sẽ xảy ra
Vì vậy, nếu bạn chỉ định 1 giây (1 giây) thì quá trình chuyển đổi sang phần tử sẽ diễn ra trong hơn 1 giây

img {
  transition-duration: 1s; /* seconds */
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

hoặc là

img {
  transition-duration: 200ms; /* milliseconds */
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

chức năng chuyển đổi thời gian

Thuộc tính này có thể thay đổi rất nhiều giao diện hoạt hình của bạn. Nó áp dụng các tính năng tích hợp sẵn, chẳng hạn như tính năng dễ dàng hoặc bạn có thể xác định khối-bezier để dễ dàng tùy chỉnh hơn
Nếu bạn muốn chơi xung quanh với khối bezier
Bạn cũng có thể thử với nhiều tiện ích khác nhau trên MDN

img {
  transition-timing-function: ease-in; 
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

img {
  transition-timing-function: steps(6, end);
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

.skew:hover{
   transform: skew(-10deg)
/* transform: skew(-10deg, 20deg); */
/* transform: skewX(-10deg); */
/* transform: skewY(20deg); */
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

độ trễ chuyển tiếp

Với thuộc tính này, bạn có thể chỉ định độ trễ giữa thời điểm thay đổi thuộc tính và quá trình chuyển đổi thực sự bắt đầu

.skew:hover{
   transform: skew(-10deg)
/* transform: skew(-10deg, 20deg); */
/* transform: skewX(-10deg); */
/* transform: skewY(20deg); */
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

hoặc là

.skew:hover{
   transform: skew(-10deg)
/* transform: skew(-10deg, 20deg); */
/* transform: skewX(-10deg); */
/* transform: skewY(20deg); */
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

chuyển đổi tay ngắn

Bạn có thể viết từng thuộc tính riêng lẻ như trên hoặc thay vào đó, bạn có thể sử dụng ký tự chuyển tiếp. Nó sẽ trông giống như thế này. Đầu tiên, xác định thuộc tính chuyển đổi, sau đó là thời lượng, chức năng định thời và cuối cùng là bất kỳ độ trễ nào bạn có thể muốn

.skew:hover{
   transform: skew(-10deg)
/* transform: skew(-10deg, 20deg); */
/* transform: skewX(-10deg); */
/* transform: skewY(20deg); */
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

kết hợp

Bạn có thể biến đổi từng thuộc tính riêng biệt hoặc bạn có thể tạo các hoạt ảnh thú vị hơn bằng cách kết hợp các thuộc tính biến đổi

Đây là một ví dụ trong đó tôi kết hợp tất cả các biến đổi cộng với chuyển đổi thành một hoạt ảnh duy nhất khi di chuột

Đối với các trang web của chúng tôi, bạn có thể kết hợp các thuộc tính này để tạo hoạt ảnh vui nhộn hoặc hướng sự chú ý của người dùng đến các khu vực cụ thể của trang web

Một trường hợp sử dụng phổ biến là thêm hiệu ứng di chuột vào một nút. Trong ví dụ này, tôi có một chuyển đổi trên nút và tôi đang kết hợp các chuyển đổi, dịch và chia tỷ lệ để thu hút sự chú ý nhiều hơn đến nút khi nó được di chuột qua

Các phép biến đổi và chuyển tiếp được thực hiện như thế nào trong CSS?

Quá trình chuyển đổi và biến đổi có giống nhau không?

Biến đổi được sử dụng để làm gì trong CSS?

Những thuộc tính CSS nào có thể được chuyển đổi?