web-dev-qa-db-ja.com

CSSで要素を回転+反転する方法

Transformプロパティを使用すると、回転または反転できますが、両方を同時に実行するにはどうすればよいですか？要素を90度回転し、水平方向に反転させたいと考えていますか？両方とも同じプロパティで実行されるため、前者は後者で上書きされます。便宜上、フィドルの例を示します。

http://jsfiddle.net/DtNh6/

transform: rotate(90deg);
transform: scaleX(-1);
csscss3css-transforms
24
chinabuffet

私はjsfiddleをいじりましたが、これはうまくいきました：

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

それを質問に関連付けると、結果のCSSは次のようになります

transform: rotate(90deg) scaleX(-1);
37
James Green

このように、プロパティはスペースで区切ることができます。

transform: rotate(90deg) scaleX(-1);
11
Austin Brunkhorst

将来の世代のための、より完全な答え：

.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);
}
7
Kaan Soral

これを見てください：

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/

0
Owaiz Yusufi