書式
transform-origin : 横の基準位置 縦の基準位置
説明
変形の基準位置を指定するにはtransform-originを使います。最初のパラメータが横方向の基準位置、2番目のパラメータが縦方向の基準位置になります。基準位置は50% 25%のようにパーセンテージで指定したりleft, right, top, bottomなどの位置を示す文字も指定することができます。
また、translateX()を指定すると横方向だけの移動量を、translateY()を指定すると縦方向だけの移動量を指定することができます。
ブラウザによってはベンダープレフィックスを指定しないと動作しません。
#content {
width: 300px;
border:1px solid red;
transform-origin : 50% 50%;
-webkit-transform-origin : 50% 50%;
-moz-transform-origin : 50% 50%;
-o-transform-origin : 50% 50%;
-ms-transform-origin : 50% 50%;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
目次に戻る