unknown: CSS3 文字と画像の回転、鏡文字

2016年10月25日火曜日

transform: rotate( 角度 ); /* 2D回転 */

transform: rotateX( 角度 ); /* X軸回転 */

transform: rotateY( 角度 ); /* Y軸回転 */

transform: rotateZ( 角度 ); /* Z軸回転 */

----------------------------------------

transform: rotateY( 180deg );

----------------------------------------

transform:matrix(-1, 0, 0, 1, 0, 0);

----------------------------------------

1番目の数値は、水平方向の縮尺（a）

2番目の数値は、垂直方向の傾斜率（b）

3番目の数値は、水平方向の傾斜率（c）

4番目の数値は、垂直方向の縮尺（d）

5番目の数値は、水平方向の移動距離（e）

6番目の数値は、垂直方向の移動距離（f）

----------------------------------------

古いバージョンを利用しているユーザ向けに、

各ベンダープレフィックスを付けなければならない場合がある。

-----------------------------------

-moz-transform: rotate( 90deg ); /* Firefox用 */

-webkit-transform: rotate( 90deg ); /* Chrome,Safari,新しいOpera用 */

-o-transform: rotate( 90deg ); /* 古いOpera用 */

-ms-transform: rotate( 90deg ); /* IE9用 */

transform: rotate( 90deg ); /* CSS3の書き方 */

-----------------------------------

span等のインライン要素は display:inline-block;としないと

効果が出ない。

unknown