Cách lật ảnh theo chiều dọc trong CSS

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

Hình ảnh này đã được lưu trữ trong thư viện phương tiện tích hợp miễn phí do ImageKit cung cấp. io.

ImageKit là một sản phẩm phân phối và quản lý hình ảnh và video hoàn chỉnh giúp chúng tôi tối ưu hóa việc phân phối hình ảnh trong thời gian thực mà không tốn nhiều công sức. Hình ảnh được lưu trữ trên ImageKit có thể truy cập tại đây -

https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg

Bạn có thể đăng ký ImageKit miễn phí vĩnh viễn và lưu trữ hình ảnh và video của mình ở đó. Bạn cũng có thể phân phối nội dung được tối ưu hóa bằng CDN trực tiếp trên trang web và ứng dụng của mình bằng URL ImageKit

Sử dụng thẻ

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 -

Xoay 180 độ theo chiều kim đồng hồ bằng các chức năng CSS

Chúng tôi cũng có thể cung cấp một giá trị âm để xoay hình ảnh theo hướng ngược chiều kim đồng hồ. Ở đây chúng tôi đang cố gắng xoay hình ảnh 40 độ theo hướng ngược chiều kim đồng hồ

img {
	transform: rotate(-40deg)
}

Xoay ngược chiều kim đồng hồ 40 độ bằng hàm CSS

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

Hoạt hình kết quả 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

Lật hình ảnh theo chiều ngang bằng CSS

Tương tự, chuyển giá trị

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. Để 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

8

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

img {
    transform: rotate(180deg);
}

3 đến hàm

5 trong CSS

Hình ảnh được xoay trong thời gian thực bằng ImageKit - https. //ik. bộ hình ảnh. io/ikmedia/xoay-blog/suv-image_CydtbqUYa. jpg?tr=rt-180

Sau đó, chúng tôi có thể sử dụng URL này trực tiếp trong HTML, ứng dụng hoặc email của mình mà không phải lo lắng về việc liệu thiết bị cuối có hỗ trợ CSS hay không

1

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.

5

Chúng tôi cũng có thể 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

7

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 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

Phần 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ý tài khoản miễn phí và tận dụng các chuyển đổi và tối ưu hóa thời gian thực của nó để phân phối phương tiện trên trang web của bạn