perspectiveの基点位置指定
perspective-origin / perspective の基点位置指定
perspective-origin のサンプル
例
1
2
3
LT / CT / RT / LC / CC / RC / LB / CB / RB /
ボタンクリックでperspective-origin変更
perspective-origin : center center
サンプル例の内容
【例】perspective:150pxの白枠divに以下を配置。
[1] transform: rotateY(30deg) top : 50px left : 10px
※ ウインドウサイズが380px以下は top : 50px left : 0px
[2] transform: rotateX(30deg) top:50px left:120px
※ ウインドウサイズが380px以下は top : 50px left : 70px
[3] transform: rotateX(90deg) rotateY(90deg) top:50px left:220px
※ ウインドウサイズが380px以下は top : 50px left : 140px
ボックス下のリンククリックで、白枠ボックスの perspective-origin を変更するサンプル。
C…center Ｌ…left Ｒ…right Ｔ…top Ｂ…bottom
赤丸っぽいものは一応、perspective-originの消失点をイメージ
perspectiveの基点位置指定プロパティ
- perspective-origin:x y;
- perspectiveの基点位置を指定。（指定なしは中心）
x = X軸（水平）方向の、長さの値、パーセント値、キーワード(left,center,right)を指定。
y = Y軸（垂直）方向の、長さの値、パーセント値、キーワード(top,center,bottom)を指定。
MDNの説明によると、”perspective-origin プロパティは、ユーザの見ている位置を決めます。これは perspective プロパティによって消失点として使われます。”とのこと。
参考：perspective-origin(MDN)