在这篇三分钟的文章里，我们将会使用CSS和JavaScript水平或垂直地翻转图片。我们将会探索如何翻转img元素、或background-image、或者使用canvas元素翻转ImageData

翻转Image元素

我们可以使用CSS的transform属性翻转img元素

可使用scaleX和scaleY实现图片的水平或垂直翻转

我们的图片

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

用CSS翻转它

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

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

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

我们亦可使用rotateX和rotateY对图片进行翻转

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

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

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

如果你想添加动画翻转效果，rotation是不错的选择

注意到上面的动态效果图，我在transform里添加了perspective，若没有该属性，rotateY动画便会像scaleX一样平（缺少深度效果），我在scaleX动画里也添加了perspective属性，但没有任何效果

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

翻转背景图Background Image

之前我以为翻转背景图，唯一的方法便是翻转包含该背景图的元素，但这样做，会同时翻转内部的文字内容

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

这看起来，很糟糕！

为了解决该问题，我们可以将背景图添加到另一个元素或伪元素内，我比较倾向于伪元素

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

用Javascript翻转图片

用CSS翻转，只能改变图片的呈现角度，无法改变它的像素数据(pixel data)。

我们能使用<canvas>元素翻转像素数据，让我们给img元素添加classimage-tulips，如下代码所示

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

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

右侧图是canvas元素，呈现像素翻转之后的效果

尾声

我们学到了通过不同方式翻转图片的方法，同时与scaleX、scaleY相比，rotateX、rotateY的动画效果会更好一些。同时我们可以使用伪元素只翻转背景图片。最后我们可以使用canvas元素，结合JavaScript翻转图片实际像素。