如何使用CSS翻转图像

Question

我正在尝试使用CSS3翻转图像。

以下是使用JS的示例，但我需要一个直接的CSS解决方案

Answer 1

你可以试试这个：

img{
    -webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
            transition: all 1s;
}
img:hover{
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
        -ms-transform: rotate(270deg); /* IE 9 */
            transform: rotate(270deg);
}

---

您根据我的理解编辑了您的问题，然后这是最佳解决方案：

示例：http://embed.plnkr.co/ZaPfSa4Od9lfC9idwDGW/preview

img{
    -webkit-transition: all .5s; /* For Safari 3.1 to 6.0 */
    transition: all .5s;
}
img:hover{
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);

    filter: FlipH;
    -ms-filter: 'FlipH';
}

Answer 2

更完整的供应商前缀版本：

-webkit-transition: -webkit-transform 1s;
-moz-transition:    -moz-transform 1s;
-o-transition:      -o-transform 1s;
-ms-transition:     -ms-transform 1s;
transition:         transform 1s;