3DTransform 変形の原点を指定
transform-origin / 変形の原点を指定
transform-originの違いを確認するサンプル
例
1
白枠マウスホバーで青ボックスが rotateZ(360deg)
LT / CT / RT / LC / CC / RC / LB / CB / RB / -10px -10px / 100px 20px / 120px 180px /
ボタンクリックで transform-origin 変更
transform-origin : center center
2017.10.08
以下のホバーアニメを選択できるように機能追加しました。
rotateZ(360deg) rotateY(360deg) rotateX(360deg) rotateZ(360deg) rotateY(360deg) rotateZ(360deg) rotateX(360deg)
サンプル例の内容
【例】白枠divをマウスホバーで子要素の青色divが360度回転します。
ボックス下のリンククリックで、青色ボックスの transform-origin を変更し、その変化を確認するためのサンプルです。
C…center Ｌ…left Ｒ…right Ｔ…top Ｂ…bottom、ピクセル指定も3点用意。
※赤丸っぽいものは、transform-originの指定点をイメージするために角丸divを参考用として配置したものです。
変形の原点を指定プロパティ
- transform-origin
- 要素に2D変形 or 3D変形の原点を指定。初期値=ボックスの中心、z(奥行き)=0。
[指定方法]transform-origin:x y x; or transform-origin:x y;
x=X軸（水平）方向。長さの値、パーセント値、キーワード(left center right)
y=Y軸（垂直）方向。長さの値、パーセント値、キーワード(top center bottom)
z=Z軸（奥行）方向。長さの値