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 -
0 chức năng
1 chức năng
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
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 -
//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 radianMẫ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 -
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]
}
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ìnhLiê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
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ậtVí 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
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//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
5 trong CSSSau đó, 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
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
5 trong CSS//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//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
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