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

Question

transform属性可以让你旋转或翻转元素，但是如何同时进行这两个操作呢？比如我想将一个元素逆时针旋转90度并水平翻转。这两个操作都使用同一个属性，因此后者会覆盖前者。以下是一个方便的示例fiddle：

http://jsfiddle.net/DtNh6/

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

- chinabuffet

Answer 1

我在 jsfiddle 上尝试了一下，这个方法有效：

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

为了与您的问题相关联，生成的CSS如下所示：

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

- James Green

---

这个在不同浏览器中也支持吗？谢谢！ - chinabuffet

空格分隔的属性位于规范中 - “在规范中”与“被浏览器支持”的映射程度是任何人的猜测，但我认为可以放心使用它（就算我依赖浏览器实现转换）。 - James Green

我很喜欢我在他之前回答了完全相同的问题，但你却把他的标记为答案。 - Austin Brunkhorst

Answer 2

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

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

- Austin Brunkhorst

Answer 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);
}

- Kaan Soral

Answer 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/

- Owaiz Yusufi