トランスフォームの原点を指定するには?
要素書式
transform-origin: 【原点の水平位置】 【原点の垂直位置】 ;
対応ブラウザ
- IE 9：○(-ms-transform-origin)
- Firefox 10.0：○(-moz-transform-origin)
- Opera 11.61：○(-o-transform-origin)
- Chrome 17.0：○(-webkit-transform-origin)
- Safari 5.1：○(-webkit-transform-origin)
※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。
値一覧
| 値 | 内容 |
| 原点の水平位置 | 変形の原点の水平方向の位置を指定します。
単位付きの数値と left center right のキーワードが使用できます。 |
| 原点の垂直位置 | 変形の原点の垂直位置を指定します。
単位付きの数値と top center bottom のキーワードが使用できます。
省略可能で、省略した場合は50%が指定されたものとみなされます。 |
解説文
transform-originプロパティは、変形の際の原点となる位置を指定します。
指定する値は、要素の内側の範囲（0%～100%）である必要はありません。既定値では「50% 50%」で、適用される要素の中心点になります。
平行移動を行うtraslate()関数のように相対的な移動のみを行う場合は変形の原点は関係しませんが、例えば回転を行うrotate()関数では、変形の原点が回転の中心点になるため、変形の原点の位置によって結果は変わってきます。
次の例では、変形の原点を要素の左上の角に設定した上で、45度の回転を与えています。回転の軸は要素の左上の角になります。
transform-origin: left top;
transform: rotate(45deg);
次の例では、変形の原点を要素の右下に設定した上で、縦横それぞれ２倍の拡大を行っています。このとき、拡大の変形は、変形の原点の位置を変えないように行われます。
transform-origin: right bottom;
transform: scale(2);
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
font-size:1em;
width:100px;
height:100px;
border:1px solid black;
position:absolute;
}
.pos1{
left:50px;
top:50px;
}
.pos2{
left:50px;
top:250px;
}
.pos3{
left:50px;
top:400px;
}
#box1, #box3, #box5{
background-color:rgba(255,0,0,0.3);
}
#box2, #box4, #box6{
background-color:rgba(0,255,0,0.3);
}
/* 45度の回転を与えます */
#box1, #box2{
transform: rotate(45deg); /* 標準 */
-ms-transform: rotate(45deg); /* IE */
-moz-transform: rotate(45deg); /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-webkit-transform: rotate(45deg); /* Chrome, Safari */
}
/* 1.5倍の拡大を行います */
#box3, #box4{
transform: scale(1.5);
-ms-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
}
/* 30度、10度の傾斜変形を加えます */
#box5, #box6{
transform: skew(30deg, 10deg);
-ms-transform: skew(30deg, 10deg);
-moz-transform: skew(30deg, 10deg);
-o-transform: skew(30deg, 10deg);
-webkit-transform: skew(30deg, 10deg);
}
/* 変形の原点を指定します */
#box2, #box4, #box6{
transform-origin:30px 70px;
-ms-transform-origin:30px 70px;
-moz-transform-origin:30px 70px;
-o-transform-origin:30px 70px;
-webkit-transform-origin:30px 70px;
}
</style>
</head>
<body>
<p>ピンクが原点指定なしの場合で、緑色が原点指定ありの場合です</p>
<p class="pos1 box">変形前のボックス(rotate)</p>
<p id="box1" class="pos1 box"></p>
<p id="box2" class="pos1 box"></p>
<p class="pos2 box">変形前のボックス(scale)</p>
<p id="box3" class="pos2 box"></p>
<p id="box4" class="pos2 box"></p>
<p class="pos3 box">変形前のボックス(skew)</p>
<p id="box5" class="pos3 box"></p>
<p id="box6" class="pos3 box"></p>
</body>
</html>
関連項目
