如何使用 CSS 旋转 + 翻转元素答案

【问题标题】：How to rotate + flip element with CSS如何使用 CSS 旋转 + 翻转元素
【发布时间】：2013-06-05 14:50:05
【问题描述】：

transform 属性可以让您旋转或翻转，但是如何同时进行这两种操作呢？假设我想将一个元素旋转 90 度并水平翻转它？两者都使用相同的属性完成，因此后者会覆盖前者。为方便起见，这是一个示例小提琴：

transform: rotate(90deg);
transform: scaleX(-1);

【问题讨论】：

标签： css css-transforms

【解决方案1】：

属性可以用空格分隔，就像这样。

transform: rotate(90deg) scaleX(-1);

【讨论】：

【解决方案2】：

我摆弄了 jsfiddle，这很有效：

$('#photo').css('transform', 'rotate(90deg) scaleX(-1)');

为了将它与您的问题联系起来，生成的 CSS 看起来像

transform: rotate(90deg) scaleX(-1);

【讨论】：

知道是否也支持跨浏览器？谢谢！
规范中的空格分隔属性位 - “规范中”映射到“浏览器支持”的程度是任何人的猜测，但我认为我有信心使用它（因此就我完全依赖实现转换的浏览器而言）
我喜欢我在他面前回答完全相同的问题，而你将他标记为答案。

【解决方案3】：

对于后代，更完整的答案：

.rotate2{ /*leaning left <- */
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    transform:rotate(270deg);
}
.rotate4{ /*upside down*/
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
}
.rotate6{ /*leaning right -> */
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
}
.rotate8{ /*vertical flip*/ /*upside-down mirror*/
    -moz-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);
}
.rotate10{ /*vertical flip*/ /*upside-down*/
    -moz-transform: rotate(90deg) scale(1, -1);
    -webkit-transform: rotate(90deg) scale(1, -1);
    -o-transform: rotate(90deg) scale(1, -1);
    -ms-transform: rotate(90deg) scale(1, -1);
    transform: rotate(90deg) scale(1, -1);
}
.rotate12{ /*horizontal flip*/ /*left-right mirror*/
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.rotate14{ /*horizontal flip*/ /*left-right mirror*/
    -moz-transform: rotate(90deg) scale(-1, 1);
    -webkit-transform: rotate(90deg) scale(-1, 1);
    -o-transform: rotate(90deg) scale(-1, 1);
    -ms-transform: rotate(90deg) scale(-1, 1);
    transform: rotate(90deg) scale(-1, 1);
}

【讨论】：

【解决方案4】：

看看这个：

element {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

更多信息请点击链接：https://css-tricks.com/snippets/css/flip-an-image/

【讨论】：