使用CSS水平/垂直翻转/镜像图像

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图翻转图像以显示4种方式：原始（无变化），水平翻转，垂直翻转，水平+垂直翻转。

为了做到这一点，我在下面做，除了水平+垂直翻转之外，它还可以正常工作，你知道为什么它不起作用吗？

.img-hor {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
.img-vert {
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}
.img-hor-vert {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}

回答：

尝试这个：

.img-hor-vert {
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

以前没有用，因为您transform在CSS中覆盖了。因此，它没有执行全部操作，而是执行了最后一个操作。有点像如果您执行background-color两次，它将覆盖第一个。

以上是 使用CSS水平/垂直翻转/镜像图像 的全部内容， 来源链接： utcz.com/qa/431836.html

回到顶部