一尘不染

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

css

我试图翻转图像以显示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";
}

阅读 1015

收藏
2020-05-16

共1个答案

一尘不染

尝试这个:

.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两次,它将覆盖第一个。

2020-05-16