html图片沿y轴转换,html-使用CSS水平翻转/垂直翻转/镜像图像

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

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

香港专业教育学院的JS提琴在这里的问题：[https://jsfiddle.net/7vg2tn83/]

.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";

}