WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「2Dトランスフォームの原点」

transform-origin 「変形の起点」

「transform-origin」は「transform」で変形した要素の起点を指定することができます。

CSS Ver.適用要素継承
3.0 全要素なし
広告

transform-originの指定方法

構文

transform-origin : X Y [Z];

プロパティ/設定値意味
X 横(水平)方向の起点位置
長さ・大きさの単位参照
Y 縦(垂直)方向の起点位置
長さ・大きさの単位参照
Z 直交方向の起点位置
長さ・大きさの単位参照
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

transform のサンプル

「変形前の画像」

「transformにより変形」

transform: perspective(50px)
scaleZ(1.1)
rotateY(20deg);
起点 起点の位置
x
横(水平)
y
縦(垂直)
z
直交
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン