如何在CSS / html中旋转图像

Question

在我的网站上我有一个画廊，上面有我女朋友和我的一些照片，但有两张照片是颠倒显示的。 我不知道为什么。所有其他照片都很完美。 每张照片都是用相同的iPhone 7+拍摄的，但前两张照片在网站上颠倒了。在我的电脑上，它们显示得很完美。

这是网站：www.selinaundleon.com/gallery.html 有人可以帮我解决这个问题吗？ 非常感谢你。

Answer 1

您可以使用transform创建一个类并将其附加到图像（<img>元素）以进行旋转：

＆＃13;

＆＃13;

.rotate-180 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

＆＃13;

<img src="https://placehold.it/100x100" width="100"/>
<img class="rotate-180" src="https://placehold.it/100x100" width="100"/>

＆＃13;

＆＃13;

＆＃13;

注意：我建议使用您选择的图像软件重新保存旋转的图像。