web-dev-qa-db-ja.com

cssを使用して画像を水平方向と垂直方向に反転/ミラーリングします

4つの方法で画像を反転表示しようとしています：オリジナル（変更なし）、水平反転、垂直反転、水平反転+垂直反転。

これを行うには、以下を行うと、水平+垂直のフリップを除いてうまく動作しますが、これがなぜ機能しないのでしょうか？

ここで問題のJSフィドルを作成しました： https://jsfiddle.net/7vg2tn83/

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

.img-vert {
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}

.img-hor-vert {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";

        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}
htmlcsstransformcss-filters
42
sam

これを試して：

.img-hor-vert {
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

更新されたフィドル： https://jsfiddle.net/7vg2tn83/1/

CSSでtransformをオーバーライドしていたため、以前は機能していませんでした。そのため、両方を行う代わりに、最後の1つを実行しました。 background-colorを2回実行した場合のように並べ替えると、最初のコードが上書きされます。

62
pgruber

水平+垂直反転に対してtransform: rotate(180deg);を実行できます。

12
Frank Rem

使用できるリフレクションを実行するには、この形式のCSS関数rotate（）とともにtransform CSSプロパティを使用します。

transform: rotateX() rotateY();

関数rotateX（）はx軸に沿って要素を回転させ、関数rotateY（）はy軸に沿って要素を回転させます。回転を精神的に視覚化できるという点で、私のアプローチは直感的です。あなたの例では、私のアプローチを使用したソリューションは次のようになります。

.img-hor {
  transform: rotateY(180deg); // Rotate 180 degrees along the y-axis
}

.img-vert {
  transform: rotateX(180deg); // Rotate 180 degrees along the x-axis
}

.img-hor-vert {
  transform: rotateX(180deg) rotateY(180deg); // Rotate 180 degrees on both
}

ソリューションを実証するJSフィドルは https://jsfiddle.net/n20196us/1/ です

9
Edmond Weiss

セレクターには、単一の変換ルールのみを適用できます。つかいます

.img-hor-vert {
    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);
    filter: FlipH FlipV;
    -ms-filter: "FlipH FlipV";
}

ただし、どのIEが複数のフィルターを受け入れるかわかりません。

3
Victor