CSS3 transform-origin プロパティ
 完全な CSS3 リファレンス
例
Set a rotated element's base placement:
div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
} |
Try it yourself »
|
ブラウザ・サポート
Internet Explorer supports an alternative, the -ms-transform-origin property, but only for 2D-transforms.
Firefox supports an alternative, the -moz-transform-origin property, but only for 2D-transforms.
Opera supports an alternative, the -o-transform-origin property, but only for 2D-transforms.
Safari and Chrome supports an alternative, the -webkit-transform-origin property, on both 2D- and 3D-transfoms.
定義と用法
transform-origin property allows you to change the position on transformed elements.
2D transformed element can change the x- and y-axis of the element. 3D transformed element can also
change the z-axis of the element.
To better understand the transform-origin property,
view a demo.
注: This property must be used together with the
transform
property.
Safari/Chrome users: To better understand this property for 3D transforms,
view a demo.
| デフォルト値: |
50% 50% 0 |
| 継承: |
no |
| バージョン: |
CSS3 |
| JavaScript構文: |
object.style.transformOrigin="20% 40%" |
構文
| transform-origin: x-axis y-axis z-axis; |
| Property 値 |
説明 |
| x-axis |
Defining where the view is placed at the x-axis. Possible values:
- left
- center
- right
- length
- %
|
| y-axis |
Defining where the view is placed at the y-axis. Possible values:
- top
- center
- bottom
- length
- %
|
| z-axis |
Defining where the view is placed at the z-axis. Possible values:
|
完全な CSS3 リファレンス
|