CSS lật hình ảnh theo chiều dọc

Trong giải pháp này, chúng tôi xoay hình ảnh theo một góc 180 độ bằng cách sử dụng các hàm
.flipped {
    transform: rotateX(180deg) rotateY(180deg);
}
0 và
.flipped {
    transform: rotateX(180deg) rotateY(180deg);
}
1

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 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. CSS lật hình ảnh theo chiều dọc
    0 chức năng
  2. CSS lật hình ảnh theo chiều dọc
    1 chức năng
  3. CSS lật hình ảnh theo chiều dọc
    2 chức năng

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

CSS lật hình ảnh theo chiều dọc


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 quản lý và phân phối 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 cần nỗ lự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ẻ

CSS lật hình ảnh theo chiều dọc
3, chúng tôi có thể nhúng hình ảnh này vào trang web của chúng tôi

CSS lật hình ảnh theo chiều dọc

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

CSS lật hình ảnh theo chiều dọc
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 -

CSS lật hình ảnh theo chiều dọc
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)
}
CSS lật hình ảnh theo chiều dọc
Xoay ngược chiều kim đồng hồ 40 độ bằng hàm CSS
CSS lật hình ảnh theo chiều dọc
5


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

CSS lật hình ảnh theo chiều dọc
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


img{
  width: 300px;
  animation: rotation 6s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

CSS lật hình ảnh theo chiều dọc
7 và
CSS lật hình ảnh theo chiều dọc
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  
CSS lật hình ảnh theo chiều dọc
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

img {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

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

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

Tương tự, chuyển giá trị _______2_______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 nó 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 một cách khác để xoay hình ảnh

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

https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg?tr=rt-180

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

img {
    transform: rotate(180deg);
}
3 đến hàm
CSS lật hình ảnh theo chiều dọc
5 trong CSS

CSS lật hình ảnh theo chiều dọc
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

CSS lật hình ảnh theo chiều dọc

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 kết quả giống với hình ảnh thu được bằng cách chuyển giá trị âm cho hàm
CSS lật hình ảnh theo chiều dọc
5 trong CSS

https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg?tr=rt-N40

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

https://ik.imagekit.io/ikmedia/rotation-blog/suv-image_CydtbqUYa.jpg?tr=rt-N40,w-500

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

CSS lật hình ảnh theo chiều dọc
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

Làm cách nào để lật ảnh theo chiều dọc?

Làm cách nào để lật hình ảnh của tôi? . Chọn đối tượng bạn muốn lật. Nhấp chuột phải vào đối tượng đó và chọn 'Lật ngang' hoặc 'Lật dọc' .

Chúng ta có thể lật hình ảnh bằng CSS không?

Chúng ta có thể lật phần tử img bằng thuộc tính biến đổi CSS . Chúng ta có thể làm như vậy bằng cách sử dụng các phép biến đổi scaleX và scaleY. CSS để lật nó. Biến đổi xoay cũng là một lựa chọn hay khi bạn muốn tạo hiệu ứng lật.