Hướng dẫn how do you flip an image in javascript? - làm thế nào để bạn lật một hình ảnh trong javascript?
Tìm hiểu cách lật một hình ảnh (thêm hiệu ứng gương) với CSS.
Di chuyển chuột qua hình ảnh:
Cách lật hình ảnh
Thí dụ
img: di chuột {& nbsp; -WebKit-Transform: Scalx (-1); & nbsp; Biến đổi: ScaleX (-1);}
img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
Hãy tự mình thử »
Lưu ý: Ví dụ này không hoạt động trên máy tính bảng hoặc điện thoại di động. This example does not work on tablets or mobile phones.
Mẹo: Chuyển đến hướng dẫn biến đổi CSS 3D của chúng tôi, để tìm hiểu thêm về các phép biến đổi 3D. Go to our CSS 3D Transforms Tutorial, to learn more about 3D transformations.
Hình ảnh lật 3d với văn bản
Tìm hiểu cách thực hiện một cú lật 3D hoạt hình của một hình ảnh với văn bản:
Paris
Thật là một thành phố tuyệt vời
Bước 1) Thêm HTML:
Thí dụ
img: di chuột {& nbsp; -WebKit-Transform: Scalx (-1); & nbsp; Biến đổi: ScaleX (-1);}
Paris
What an amazing city
Step 2) Add CSS:Thí dụ
img: di chuột {& nbsp; -WebKit-Transform: Scalx (-1); & nbsp; Biến đổi: ScaleX (-1);}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform
0.8s;
transform-style: preserve-3d;
}
Hãy tự mình thử »
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
Lưu ý: Ví dụ này không hoạt động trên máy tính bảng hoặc điện thoại di động.
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
Mẹo: Chuyển đến hướng dẫn biến đổi CSS 3D của chúng tôi, để tìm hiểu thêm về các phép biến đổi 3D.
.flip-box-front {
background-color: #bbb;
color: black;
}
Hình ảnh lật 3d với văn bản
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
Hãy tự mình thử »
-moz-chuyển đổi: xoay (90deg) ;.I don't know how to reverse. Pls help.
var canvas = document.createElement('canvas');
canvas.width = 16 * scale;
canvas.height = 32 * scale;
//we assign the same classname the image has, for CSS purposes
canvas.setAttribute('class', skinImage.getAttribute('class'));
canvas.setAttribute('title', skinImage.getAttribute('title'));
var context = canvas.getContext("2d"),
s = scale;
context.imageSmoothingEnabled=!1,
context.mozImageSmoothingEnabled=!1,
context.oImageSmoothingEnabled=!1,
CanvasRenderingContext2D.webkitImageSmoothingEnabled=!1,
context.clearRect(0,0,canvas.width,canvas.height);
//back draw the head
context.drawImage(skinImage, 24, 8, 8, 8, 4*s, 0*s, 8*s, 8*s);
//back draw the body
context.drawImage(skinImage, 32, 20, 8, 12, 4*s, 8*s, 8*s, 12*s);
//back draw the right leg
context.drawImage(skinImage, 52, 20, 4, 12, 12*s, 8*s, 4*s, 12*s);
//back draw the right arm
context.drawImage(skinImage, 12, 20, 4, 12, 8*s, 20*s, 4*s, 12*s);
//back draw the left arm
context.drawImage(skinImage, 12, 20, 4, 12, 4*s, 20*s, 4*s, 12*s);
context.drawImage(skinImage, 52, 20, 4, 12, 0*s, 8*s, 4*s, 12*s);
Lớp sau trong thẻ kiểu CSS chứa các thuộc tính khác nhau giúp xoay hình ảnh ..
.
Xoay một hình ảnh ..
.rotate90 {.
-moz-chuyển đổi: xoay (90deg) ;.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ử <img src="/media/tulips.jpg" alt="" />0, <img src="/media/tulips.jpg" alt="" />1 hoặc lật <img src="/media/tulips.jpg" alt="" />2 thực tế bằng phần tử <img src="/media/tulips.jpg" alt="" />3.
img {
/* flip horizontally */
transform: scaleX(-1);
}
img {
/* flip vertically */
transform: scaleY(-1);
}
img {
/* flip both */
transform: scale(-1, -1);
} nguyên bản scaleX(-1) scaleY(-1) Lật một phần tử hình ảnhChúng ta có thể lật phần tử <img src="/media/tulips.jpg" alt="" />0 bằng thuộc tính CSS <img src="/media/tulips.jpg" alt="" />5. Chúng ta có thể làm như vậy bằng cách sử dụng các biến đổi <img src="/media/tulips.jpg" alt="" />6 và <img src="/media/tulips.jpg" alt="" />7.
img {
/* flip horizontally */
transform: rotateY(180deg);
}
img {
/* flip vertically */
transform: rotateX(180deg);
}
img {
/* flip both */
transform: rotateX(180deg) rotateY(180deg);
} nguyên bản rotateY(180deg) rotateX(180deg) rotateX(180deg)rotateY(180deg)
rotateY(180deg)Hình ảnh của chúng tôi:
<img src="/media/tulips.jpg" alt="" /> CSS để lật nó.tỷ lệ (-1, -1)
@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 <img src="/media/tulips.jpg" alt="" />1 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)
Lật một hình ảnh với JavaScript
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ử <img src="/media/tulips.jpg" alt="" />3. Đ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ẻ <img src="/media/tulips.jpg" alt="" />0 với tên lớp được đặt thành img {
/* flip horizontally */
transform: scaleX(-1);
}
img {
/* flip vertically */
transform: scaleY(-1);
}
img {
/* flip both */
transform: scale(-1, -1);
}5.
<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ố <img src="/media/tulips.jpg" alt="" />3 để thao tác.
const inputImage = document.querySelector('.image-tulips');
// need to check if the image has already loaded
if (inputImage.complete) {
flipImage();
}
// if not, we wait for the onload callback to fire
else {
inputImage.onload = flipImage;
}
// this function will flip the imagedata
function flipImage() {
// create a canvas that will present the output image
const outputImage = document.createElement('canvas');
// set it to the same size as the image
outputImage.width = inputImage.naturalWidth;
outputImage.height = inputImage.naturalHeight;
// get the drawing context, needed to draw the new image
const ctx = outputImage.getContext('2d');
// scale the drawing context negatively to the left (our image is 400 pixels wide)
// resulting change to context: 0 to 400 -> -400 to 0
ctx.scale(-1, 1);
// draw our image at position [-width, 0] on the canvas, we need
// a negative offset because of the negative scale transform
ctx.drawImage(inputImage, -outputImage.width, 0);
// insert the output image after the input image
inputImage.parentNode.insertBefore(
outputImage,
inputImage.nextElementSibling
);
}Mã 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 {
/* flip horizontally */
transform: scaleX(-1);
}
img {
/* flip vertically */
transform: scaleY(-1);
}
img {
/* flip both */
transform: scale(-1, -1);
}7 và hình ảnh thứ hai là phần tử Canvas ____28.
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 <img src="/media/tulips.jpg" alt="" />5. <img src="/media/tulips.jpg" alt="" />6 và <img src="/media/tulips.jpg" alt="" />7 biến đổi hoạt động nhưng biến đổi <img src="/media/tulips.jpg" alt="" />8 và <img src="/media/tulips.jpg" alt="" />9 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.
Làm cách nào để lật một hình ảnh?
Nhấn vào Chỉnh sửa ở phía dưới bên trái để tiết lộ các công cụ chỉnh sửa có sẵn. Chọn xoay từ các tùy chọn có sẵn. Bạn sẽ thấy biểu tượng thời gian ở phía dưới. Biểu tượng này để lật ảnh của bạn. Select Rotate from the available options. You'll see a time icon in the bottom. Tap this icon to flip your photo.
Bạn có thể lật một hình ảnh trong HTML không?
Lật một phần tử hình ảnh Chúng ta có thể lật phần tử IMG bằng thuộc tính CSS Transform.Chúng ta có thể làm như vậy bằng cách sử dụng các biến đổi ScaleX và Scaley.CSS để lật nó.Biến đổi xoay cũng là một lựa chọn tốt khi bạn muốn làm động cho lật.We can flip the img element using the CSS transform property. We can do so using the scaleX and scaleY transforms. The CSS to flip it. The rotation transform is also a nice choice for when you want to animate the flip.
-moz-chuyển đổi: xoay (90deg) ;.
Example..
Làm thế nào để bạn lật một hộp trong JavaScript?
/ * Container này là cần thiết để định vị mặt trước và mặt sau */ ....
/ * Thực hiện một lần lật ngang khi bạn di chuyển chuột qua thùng chứa hộp lật */ ....
/ * Định vị mặt trước và mặt sau */ ....
/ * Phong cách phía trước */ ....
/ * Phong cách mặt sau */.
Làm cách nào để xoay hình ảnh trong HTML?
Lớp sau trong thẻ kiểu CSS chứa các thuộc tính khác nhau giúp xoay hình ảnh ...
.
.
Xoay một hình ảnh ..
.
.
Xoay một hình ảnh ..
-webkit-transform:rotate(90deg);.
.rotate90 {.