Hướng dẫn css flip image vertically - css lật hình ảnh theo chiều dọc

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 một phần tử img, ____10 hoặc lật

img {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}

img {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}

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

img {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}

img {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}

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 src="/media/tulips.jpg" alt="" />

CSS để lật nó.

img {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}

Ngoài ra, bạn có thể sử dụng

img {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}

img {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}

img {
    /* flip horizontally */
    transform: rotateY(180deg);
}

img {
    /* flip vertically */
    transform: rotateX(180deg);
}

img {
    /* flip both */
    transform: rotateX(180deg) rotateY(180deg);
}

tỷ lệ (-1, -1)

img {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}

img {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}

ScaleX

@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);
    }
}

xoay

Lưu ý rằng tôi đã thêm một quan điểm nhỏ vào chuỗi biến đổi. Nếu không có quan điểm biến đổi hoạt hình

img {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}

img {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}

<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);
}

Lật một hình nền

nguyên bản

Lật một hình nền

scaleX(-1)

Cách duy nhất (tại thời điểm này) (và theo như tôi có thể nói) để lật ____10 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ó.

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.

Không tuyệt vời

.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);
}

Lật một hình nền

nguyên bản

Lật một hình nền

scaleX(-1)

Cách duy nhất (tại thời điểm này) (và theo như tôi có thể nói) để lật ____10 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ó.

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.

Không tuyệt vời

<img src="/media/tulips.jpg" class="image-tulips" alt="" />

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

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
    );
}

Hãy cùng đi với yếu tố giả.

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 {
    /* flip horizontally */
    transform: scaleX(-1);
}

img {
    /* flip vertically */
    transform: scaleY(-1);
}

img {
    /* flip both */
    transform: scale(-1, -1);
}