Làm thế nào để bạn thêm xoay vòng trong css?

Trên web, animation đóng vai trò then chốt để thu hút người dùng. Người dùng có nhiều khả năng quan tâm đến trang web hoạt hình hơn là trang web tĩnh. Với việc sử dụng thuộc tính CSS “animation”, chúng ta có thể tạo hiệu ứng động cho bất kỳ phần tử nào. Thuộc tính này cho phép chúng tôi làm cho trang web hấp dẫn và thanh lịch hơn. Nó thay đổi phong cách của các yếu tố dần dần

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về hoạt ảnh xoay trong CSS

Làm cách nào để Xoay Hoạt hình trong CSS?

Hoạt ảnh xoay cho phép một phần tử thay đổi diện mạo của nó trong khoảng thời gian trung tâm. Đối với hoạt ảnh xoay, thuộc tính “animation” của CSS được sử dụng. Chúng tôi có thể áp dụng thuộc tính này trong bất kỳ phần tử nào của HTML như hình ảnh, SVG, văn bản, v.v.

Bây giờ, chúng ta sẽ thảo luận về các điểm sau

• • tài sản hoạt hình
  • Cú pháp của thuộc tính hoạt ảnh
  • Làm cách nào để thực hiện hoạt ảnh xoay bằng CSS?

Làm cách nào để sử dụng thuộc tính “animation” trong CSS?

Thuộc tính “animation” cho phép thay đổi kiểu phần tử từ cái này sang cái khác. Đối với điều này, hãy chỉ định tên hoạt ảnh, tốc độ, số lượng hoạt ảnh và hướng quay theo cú pháp sau

cú pháp

hoạt hình. hướng lặp lại tốc độ tên hoạt hình;

 

• • tên hoạt hình. Nó đại diện cho tên của hoạt ảnh [tích hợp sẵn hoặc tùy chỉnh [sử dụng khung hình chính]]
  • tốc độ, vận tốc. Nó được sử dụng để làm chậm và tăng tốc hoạt ảnh. Ví dụ: “2s” [trong hai giây]
  • số lần lặp. Nó biểu thị số lần bạn muốn hoạt hình của mình tiếp tục
  • hướng đi. Nó chỉ định cách hoạt ảnh sẽ phát, chẳng hạn như tiến, lùi hoặc luân phiên

Sau khi hiểu cú pháp cơ bản của thuộc tính hoạt hình, chúng ta hãy bắt tay vào thực hành và hiểu cách tạo hoạt ảnh xoay bằng CSS

Thí dụ. Xoay đối tượng HTML hình ảnh trong CSS

Trong HTML, viết mã của phần tử bạn muốn xoay. Ở đây chúng tôi sẽ xoay một biểu tượng SVG

 
   
 

 
Hãy áp dụng hoạt ảnh xoay trong CSS. Ở đây, “. rotate” được sử dụng để truy cập lớp được gán cho hình ảnh đã chọn mà chúng tôi muốn xoay trong CSS. Tiếp theo, chúng tôi sẽ đặt chiều rộng của hình ảnh thành “100px” và xoay nó trong 2 giây với số lần vô hạn theo mô hình tuyến tính. Tuy nhiên, bạn có thể thay đổi tốc độ, số lần lặp và hướng theo lựa chọn của mình.

.rotate {
  chiều rộng. 100px;
  hoạt ảnh. quay 2s tuyến tính vô hạn;
}

 
@keyframes được sử dụng để xác định điểm bắt đầu và điểm kết thúc của hoạt ảnh [sử dụng từ khóa “từ” và “đến”]. Ngoài ra, hãy cung cấp tên hoạt ảnh “xoay vòng” theo sau là @keyframes mà bạn muốn tạo hiệu ứng. Vì chúng ta muốn di chuyển hoạt ảnh theo hình tròn, nên hãy sử dụng chức năng “rotate[]” của thuộc tính biến đổi, trong đó chúng ta sẽ bắt đầu từ “0 độ” và kết thúc ở “359 độ”.

@ xoay vòng khung hình chính {
  từ {
    transform: rotate[ 0độ ] ;
. xoay }
  to {
    transform: rotate[ 359deg ] ;
  }
}

 
Sau khi triển khai mã CSS, hãy chuyển đến tệp HTML và chạy tệp đó để nhận được kết quả sau.

Với việc sử dụng thuộc tính “animation”, chúng ta đã xoay thành công một phần tử trong một khoảng thời gian xác định

Sự kết luận

Để tạo hoạt ảnh xoay trong CSS, hãy sử dụng thuộc tính hoạt ảnh và đặt giá trị của hoạt ảnh như thời lượng, hướng và tốc độ. Hơn nữa, hàm rotate[] CSS đang được sử dụng để xoay tròn một phần tử trong thuộc tính biến đổi. Bài viết này đã giải thích chi tiết thuộc tính hoạt ảnh để xoay hoạt ảnh trong vô số lần

Mục đích của bài viết này là xoay một phần tử HTML bằng cách sử dụng thuộc tính biến đổi CSS. Thuộc tính này được sử dụng để di chuyển, xoay, chia tỷ lệ và thực hiện các loại chuyển đổi khác nhau của các phần tử

Hàm rotate[] có thể được sử dụng để xoay bất kỳ phần tử HTML nào hoặc được sử dụng để chuyển đổi. Phải mất một tham số xác định góc quay. Góc quay bao gồm hai phần, giá trị của góc quay tiếp theo là đơn vị quay. Đơn vị có thể được xác định theo độ [deg], độ dốc [grad], radian [rad] và lần lượt

Hình ảnh rất quan trọng để truyền tải thông tin và tăng cường sự xuất hiện của trang web của bạn. Bạn có thể sử dụng chúng để tạo hình ảnh tuyệt đẹp như hình ảnh sản phẩm, biểu ngữ, hình minh họa, v.v.

Đôi khi, bạn có thể muốn xoay hoặc lật hình ảnh trên trang của mình để phù hợp với các yêu cầu hình ảnh cụ thể cho doanh nghiệp của bạn

Bài viết này sẽ thảo luận về cách xoay và lật hình ảnh trong HTML của bạn bằng cách sử dụng các thao tác chuyển đổi CSS.

Sau đó, chúng ta sẽ xem xét các chuyển đổi hình ảnh theo thời gian thực của ImageKit sẽ giúp bạn đạt được các hiệu ứng tương tự trên các nền tảng mà không cần dựa vào CSS.

Các thao tác xoay và lật hình ảnh bằng CSS và HTML

Bạn có thể áp dụng các hàm CSS cho hình ảnh để tạo các phép biến đổi như xoay, lật và các hiệu ứng khác. Chúng tôi sẽ sử dụng các hàm CSS sau và tạo các hiệu ứng khác nhau -

1. chức năng
   0

2. 1 chức năng
3. chức năng
   2

Để minh họa, chúng tôi đã chọn hình ảnh sau đây của Helena Lopes từ Pexels

3, chúng tôi có thể nhúng hình ảnh này vào trang web của chúng tôi

Hãy sử dụng các chức năng CSS khác nhau để đạt được các hiệu ứng hình ảnh khác nhau trên những hình ảnh này

Xoay ảnh sử dụng hàm rotate[]

Như tên gợi ý, bạn có thể sử dụng hàm

4 để xoay hình ảnh trong không gian hai chiều. Hình ảnh được xoay dựa trên đối số được truyền cho hàm này theo các đơn vị được CSS hỗ trợ, chẳng hạn như độ, độ dốc, lượt hoặc radian

Mẫu CSS bên dưới xoay hình ảnh 180 độ

img {
    transform: rotate[180deg];
}

Hình ảnh kết quả được hiển thị bên dưới -

5

Tương tự, bạn có thể sử dụng các giá trị khác trong hàm

5 để xoay ảnh theo yêu cầu của mình

Liên tục xoay hình ảnh bằng CSS để có hiệu ứng động

Chúng tôi cũng có thể sử dụng các thuộc tính hoạt hình và khung hình chính của CSS để tạo hoạt ảnh mà không cần sử dụng bất kỳ Javascript hoặc thư viện bên thứ ba nào khác

Hãy xem một hoạt ảnh đơn giản trong đó chúng ta sẽ xoay một hình ảnh liên tục và đặt hình ảnh hoàn thành một lần xoay trong 6 giây. Định nghĩa khung hình chính xác định xoay, trong khi thuộc tính hoạt ảnh xác định thời gian và sự lặp lại của hoạt ảnh

1

Kết quả hoạt hình trông như thế này -

Lật hình ảnh bằng thuộc tính biến đổi CSS

Hàm

7 và

8 có thể được sử dụng để lật hình ảnh theo chiều ngang hoặc chiều dọc tương ứng. Để lật ảnh, chúng ta phải truyền giá trị âm cho các hàm này. Giá trị âm  

9 cũng giữ nguyên tỷ lệ khung hình ban đầu trong khi lật

Ví dụ: CSS bên dưới lật hình ảnh theo chiều ngang

5

Kết quả là một hình ảnh phản chiếu được lật theo chiều ngang của hình ảnh ban đầu của chúng ta

9 cho hàm scaleY sẽ lật hình ảnh theo chiều dọc

Xoay hình ảnh động bằng ImageKit

Trong các ví dụ trên, chúng tôi đã xoay hình ảnh bằng thuộc tính CSS. CSS bị hạn chế chỉ sử dụng trong trình duyệt web.

Do đó, nếu chúng tôi phải xoay hình ảnh trên bất kỳ nền tảng nào khác, gửi hình ảnh đó qua email không hỗ trợ các chức năng CSS nâng cao hoặc không dựa vào CSS nói chung, thì chúng tôi cần .

ImageKit là một dịch vụ chuyển đổi, tối ưu hóa và lưu trữ theo thời gian thực cho phép bạn thao tác với hình ảnh và video trong thời gian thực bằng API chuyển đổi URL dễ sử dụng

Xoay hình ảnh trong thời gian thực với thông số xoay

Sử dụng các phép biến đổi của ImageKit rất đơn giản. Bạn chỉ cần chỉ định chuyển đổi ở định dạng được chỉ định trong URL

Để xoay hình ảnh, ImageKit cung cấp tham số

img {
    transform: rotate[180deg];
}

1. Để xoay hình ảnh 180 độ, chúng ta cần thêm tham số chuyển đổi

img {
    transform: rotate[180deg];
}

2 vào URL, như hình bên dưới

9

Hình ảnh kết quả giống như chuyển

img {
    transform: rotate[180deg];
}

3 đến hàm

5 trong CSS

2

Chúng ta cũng có thể chuyển giá trị âm cho tham số

img {
    transform: rotate[180deg];
}

1 để xoay hình ảnh theo hướng ngược chiều kim đồng hồ.

Để xoay hình ảnh 40 độ theo hướng ngược chiều kim đồng hồ, chúng ta cần thêm tham số

img {
    transform: rotate[180deg];
}

6 vào URL. Hình ảnh thu được giống với hình ảnh thu được bằng cách chuyển giá trị âm cho hàm

5 trong CSS.

6

Chúng tôi cũng có thể thay đổi kích thước hình ảnh trong thời gian thực bằng cách sử dụng cùng một API chuyển đổi hình ảnh dựa trên URL. Để thay đổi kích thước hình ảnh thành chiều rộng 500px trong khi xoay nó, chúng ta cần thêm

img {
    transform: rotate[180deg];
}

8 vào URL trên

8

Hình ảnh kết quả của chúng tôi được xoay 40 độ và được thay đổi kích thước thành chiều rộng 500px

Hình ảnh đã thay đổi kích thước thành chiều rộng 500px và xoay 40 độ

Ghi chú. Thay đổi kích thước bằng ImageKit khác với thay đổi kích thước bằng thuộc tính chiều rộng trong CSS. Với tính năng thay đổi kích thước của ImageKit, hình ảnh được tải xuống qua mạng đã được thay đổi kích thước và do đó có kích thước nhỏ hơn. Với tính năng thay đổi kích thước dựa trên CSS, hình ảnh có độ phân giải đầy đủ được tải xuống trên thiết bị của người dùng dẫn đến tiêu tốn băng thông không cần thiết và sau đó được thay đổi kích thước trên thiết bị của người dùng

Sự kết luận

Xoay hình ảnh có thể hữu ích khi hình ảnh gốc cần được sửa đổi để tạo hiệu ứng hình ảnh phù hợp trên trang web hoặc ứng dụng của bạn

Bạn có thể sử dụng các hàm chuyển đổi CSS để đạt được điều này với nỗ lực tối thiểu. Tuy nhiên, điều này làm cho việc xoay hình ảnh dành riêng cho web và nền tảng web di động hỗ trợ CSS cần thiết

ImageKit là một sản phẩm quản lý, tối ưu hóa và chuyển đổi hình ảnh theo thời gian thực cho phép chúng tôi thao tác với hình ảnh trong thời gian thực bằng API dựa trên URL. Nó cung cấp tham số rt để xoay hình ảnh và hơn 50 tham số dựa trên URL khác để thao tác hình ảnh và video trên các trang web và ứng dụng trong thời gian thực

Nó cũng cung cấp dung lượng lưu trữ phương tiện phong phú và băng thông phân phối được tối ưu hóa miễn phí hàng tháng. Bạn có thể bắt đầu với ImageKit bằng cách đăng ký một tài khoản miễn phí và tận dụng các chuyển đổi và tối ưu hóa theo thời gian thực của nó để phân phối phương tiện trên trang web của bạn

Làm cách nào để xoay văn bản trong CSS?

Làm cách nào để xoay hình ảnh HTML CSS?

Xoay vòng CSS hoạt động như thế nào?