image - css3で画像を回転させる方法

Question

画像を回転させたいので、その幅ができるように赤くします

.rotate {

-webkit-transform: rotate(-9deg);

-moz-transform: rotate(-9deg);

transform: rotate(-9deg);}

しかし、これは、z軸に従って回転させたい場合です（水平はx、垂直yであり、私が何を意味するかを理解すると、zが表示されます）

さて、3D効果を与えるためにx軸またはy軸を中心に回転させたいと思います。それはcss3で可能ですか？ありがとう

score 1 · Accepted Answer

CSS3には3D変換があります。それはおそらくあなたが望むものです。Firefox、Chrome、IE10でサポートされていますが、古いIEやOperaではサポートされていません。

もう少し詳しく：

また、Z軸は深度軸（画面の内外）を指します。Z軸を中心に回転すると、通常の2D回転になります（カードにピンを突き刺した場合など）。X/Y軸を探しています。

score 1 · Accepted Answer

CSSパースペクティブを使用した後、自分がしていることを実行できます。次に例を示します。http：//jsfiddle.net/joshnh/QHxzA/

コードの重要な部分は次のとおりです（ブラウザプレフィックスを使用することを忘れないでください）：

img {
    transform: perspective(500px) rotateX(15deg);
}

2 に答える 2