CSSを使用して+ flip要素を回転する方法

Question

transformプロパティを使用すると、回転または反転することができますが、同時に両方を行う方法はありますか？要素を90度回転させて水平方向に反転させたいとします。どちらも同じプロパティで行われるため、後者は前者を上書きします。ここでは便宜上例フィドルです：

http://jsfiddle.net/DtNh6/

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

Answer 1

私はjsfiddleいじって、これが働いた：

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

あなたの質問にそれを関連付けるために、結果としてCSSは

将来の世代のために

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

Answer 2

性質がそうのように、スペースで区切ることができます。

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

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