Theo W3Schools: //www.w3schools.com/cssref/css3_pr_transform.asp
Tài sản biến đổi được hỗ trợ trong Internet Explorer 10, Firefox và Opera. Internet Explorer 9 hỗ trợ một giải pháp thay thế, thuộc tính chuyển đổi -MS (chỉ biến đổi 2D). Safari và Chrome hỗ trợ một giải pháp thay thế, thuộc tính chuyển đổi -webkit (biến đổi 3D và 2D). Opera chỉ hỗ trợ biến đổi 2D.
Đây là một biến đổi 2D, vì vậy nó sẽ hoạt động, với các tiền tố của nhà cung cấp, trên Chrome, Firefox, Opera, Safari và IE9+.
Các câu trả lời khác được sử dụng: Trước đây để ngăn nó lật nội dung bên trong. Tôi đã sử dụng nó trên chân trang của mình (để mirror theo chiều dọc từ tiêu đề của tôi):
HTML:
<footer> <p><a href="page">Footer Link</a></p> <p>© 2014 Company</p> </footer>CSS:
footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); }Vì vậy, cuối cùng bạn lật phần tử và sau đó lật lại tất cả các con của nó. Làm việc với các yếu tố lồng nhau, quá.
Cách lật hình ảnh theo chiều ngang với mã HTML.
Mở trình chỉnh sửa HTML của bạn. Tìm dòng mã cho hình ảnh bạn muốn lật. ....
Thêm thuộc tính kiểu sau vào mã hình ảnh của bạn: style = "Filter: Fliph." Thẻ hình ảnh của bạn bây giờ sẽ xuất hiện tương tự như thế này:.
Lưu tài liệu ..
Trong bài viết 3 phút này, chúng tôi sẽ xem xét việc lật các hình ảnh theo chiều ngang và theo chiều dọc bằng cách sử dụng CSS và JavaScript. Chúng tôi sẽ khám phá cách lật phần tử footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 1, footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 2 hoặc lật footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 3 thực tế bằng cách sử dụng phần tử footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 4.Lật một phần tử hình ảnh
img { /* flip horizontally */ transform: scaleX(-1); } img { /* flip vertically */ transform: scaleY(-1); } img { /* flip both */ transform: scale(-1, -1); }Hình ảnh của chúng tôi:
img { /* flip horizontally */ transform: rotateY(180deg); } img { /* flip vertically */ transform: rotateX(180deg); } img { /* flip both */ transform: rotateX(180deg) rotateY(180deg); }rotateY(180deg)
<img src="/media/tulips.jpg" alt="" />
Ngoài ra, bạn có thể sử dụng footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 9 và <img src="/media/tulips.jpg" alt="" />0
@keyframes flip-with-scale { 0% { transform: perspective(400px) scaleX(1); } 100% { transform: perspective(400px) scaleX(-1); } } @keyframes flip-with-rotate { 0% { transform: perspective(400px) rotateY(0); } 100% { transform: perspective(400px) rotateY(180deg); } }Lật một hình nền
Cách duy nhất (tại thời điểm này) (và theo như tôi có thể nói) để lật footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 2 là lật phần tử chứa hình nền. Nhưng điều đó cũng sẽ lật nội dung của nó.
<p class="tulips"> Tulips form a genus of spring-blooming perennial herbaceous bulbiferous geophytes. </p>.tulips { background-image: url(/media/tulips.jpg); background-repeat: no-repeat; background-size: contain; padding-left: 5em; } .tulips-flipped { transform: scaleX(-1); }Hoa tulip tạo thành một chi của các địa chất tuyệt vời của cây thân thảo mùa xuân.
nguyên bản
Hoa tulip tạo thành một chi của các địa chất tuyệt vời của cây thân thảo mùa xuân.
scaleX(-1)
nguyên bản
Không tuyệt vời
Để làm việc xung quanh điều này, chúng ta có thể di chuyển nền đến một phần tử riêng biệt hoặc tạo một yếu tố giả.
.tulips { display: flex; width: 15em; } /* create our pseudo element */ .tulips-flipped::before { content: ''; background-image: url(/media/tulips.jpg); background-repeat: no-repeat; background-size: cover; min-width: 5em; } /* flip our pseudo element */ .tulips-flipped::before { transform: scaleX(-1); }Hoa tulip tạo thành một chi của các địa chất tuyệt vời của cây thân thảo mùa xuân.
nguyên bản
Hoa tulip tạo thành một chi của các địa chất tuyệt vời của cây thân thảo mùa xuân.
scaleX(-1)
nguyên bản
Các kỹ thuật lật CSS chỉ thay đổi cách trình bày của một hình ảnh, không phải là dữ liệu pixel thực tế. Chúng ta có thể lật dữ liệu pixel bằng phần tử footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 4. Điều này có thể hữu ích nếu ví dụ chúng tôi muốn lật hình ảnh trước khi nó được tải lên máy chủ.
Chúng tôi sẽ sử dụng dữ liệu hình ảnh trong phần tử hình ảnh bên dưới đoạn mã, nó chỉ đơn giản là một thẻ footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 1 với tên lớp được đặt thành <img src="/media/tulips.jpg" alt="" />6.
<img src="/media/tulips.jpg" class="image-tulips" alt="" />Hãy nhận được một tham chiếu đến hình ảnh. Điều đó cho phép chúng tôi tải nó vào một yếu tố footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 4 để thao tác.
footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 0Mã trên vừa được chạy và bạn có thể xem kết quả bên dưới. Hình ảnh đầu tiên là <img src="/media/tulips.jpg" alt="" />8 và hình ảnh thứ hai là phần tử Canvas ____29.
Sự kết luận
Chúng tôi đã học ba phương pháp để lật hình ảnh cho các mục đích khác nhau. Chúng ta có thể lật hình ảnh bằng thuộc tính CSS footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 6. footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 7 và footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 8 biến đổi hoạt động nhưng biến đổi footer { background:url(/img/headerbg.png) repeat-x 0 0; /* flip background vertically */ -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } /* undo the vertical flip for all child elements */ footer * { -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); } 9 và <img src="/media/tulips.jpg" alt="" />0 cho phép hoạt hình đẹp hơn (nếu cần). Chúng tôi nhanh chóng khám phá việc lật hình nền bằng các phần tử giả và kết thúc bài viết với việc thao tác dữ liệu hình ảnh thực tế bằng cách sử dụng JavaScript và phần tử Canvas.