My CMS

科学、ITの中でプログラム、Wordpressテーマやプラグイン用途、関連の制作記事、興味のあるテーマに対しての記事、他様々ITと科学のコラボから更なる新しいアイディア等を書き留めています。実際に使えるものから、応用が効きそうな物まで幅広く書いているので、参考に成れば幸いです。

transformでdivや画像要素を回転させる

time 2016/12/22

●デフォルト

-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);

●X軸


|

-moz-transform: rotateX(30deg);
-webkit-transform: rotateX(30deg);
-o-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);

X軸

●Y軸

←–→
-moz-transform: rotateY(30deg);
-webkit-transform: rotateY(30deg);
-o-transform: rotateY(30deg);
-ms-transform: rotateY(30deg);

Y軸

●Z軸 Rotateに同じ

-moz-transform: rotateZ(30deg);
-webkit-transform: rotateZ(30deg);
-o-transform: rotateZ(30deg);
-ms-transform: rotateZ(30deg);

Z軸

●3軸 X-Y-Z rotate3d(X(比率),Y(比率),Z(比率),100deg);

 

-moz-transform: rotate3d(1,0,1,100deg);
-webkit-transform: rotate3d(1,0,1,100deg);
-o-transform: rotate3d(1,0,1,100deg);
-ms-transform: rotate3d(1,0,1,100deg);

XYZ

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でHakrをフォローしよう!

sponsored link

down

コメントする





*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

IT・医療関連

ソーシャル関連

パソコン

プログラム

個人的なブログ倉庫

社会

科学



sponsored link

Do NOT follow this link or you will be banned from the site!