html的翻转css html – 用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";

}