イメージを水平方向+垂直方向にフリップ/ミラーで表示

Question

イメージを反転すると、元の（変更なし）、水平方向に反転、垂直方向に反転、水平方向に反転+垂直方向に表示されます。

これを行うには、以下のようにして、フリップ水平方向から+垂直方向にうまく動作します。これはなぜ動作しませんか？

アイブ氏は、ここでの問題の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"; 
} 

Answer 1

これを試してみてください：

.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を上書きしたので、それは前に働いていませんでした。だから両方をする代わりに、最後のものをやっただけです。 background-colorを2回実行した場合のように、最初の1つを上書きします。

Answer 2

をあなたはどのセレクタのためにのみ、単一の変換ルールを適用することができます。 使用

.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がが複数のフィルタを受け入れるか不明です。

Answer 3

水平+垂直反転の場合、​​を実行することがあります。

Answer 4

使用できる反射を実行するには、この形式に回転（）CSS機能とともに変換CSSプロパティ：

transform: rotateX() rotateY(); 

関数回転X（）は、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/