CSS3 transform プロパティ
 完全な CSS3 リファレンス
例
Rotate a div element:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
} |
Try it yourself »
|
ブラウザ・サポート
transform property is not supported in any browser.
Internet Explorer supports an alternative, the -ms-transform property (2D transforms only).
Firefox supports an alternative, the -moz-transform property (2D transforms only).
Opera supports an alternative, the -o-transform property (2D transforms only).
Safari and Chrome support an alternative, the -webkit-transform property (3D
and 2D transforms).
定義と用法
transform property applies a 2D or 3D transformation to an element. This property allows you to rotate,
scale, move, skew, etc., elements.
To better understand the transform property,
view a demo.
| デフォルト値: |
none |
| 継承: |
no |
| バージョン: |
CSS3 |
| JavaScript構文: |
object.style.transform="rotate(7deg)" |
構文
| transform: none|transform-functions; |
| Function |
説明 |
| none |
Defines that there should be no transformation |
| matrix(n,n,n,n,n,n) |
Defines a 2D transformation, using a matrix of six values |
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate(x,y) |
Defines a 2D translation |
| translate3d(x,y,z) |
Defines a 3D translation |
| translateX(x) |
Defines a translation, using only the value for the X-axis |
| translateY(y) |
Defines a translation, using only the value for the Y-axis |
| translateZ(z) |
Defines a 3D translation, using only the value for the Z-axis |
| scale(x,y) |
Defines a 2D scale transformation |
| scale3d(x,y,z) |
Defines a 3D scale transformation |
| scaleX(x) |
Defines a scale transformation by giving a value for the X-axis |
| scaleY(y) |
Defines a scale transformation by giving a value for the Y-axis |
| scaleZ(z) |
Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate(angle) |
Defines a 2D rotation, the angle is specified in the
parameter |
| rotate3d(x,y,z,angle) |
Defines a 3D rotation |
| rotateX(angle) |
Defines a 3D rotation along the X-axis |
| rotateY(angle) |
Defines a 3D rotation along the Y-axis |
| rotateZ(angle) |
Defines a 3D rotation along the Z-axis |
| skew(x-angle,y-angle) |
Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) |
Defines a 2D skew transformation along the X-axis |
| skewY(angle) |
Defines a 2D skew transformation along the Y-axis |
| perspective(n) |
Defines a perspective view for a 3D transformed element |
 |
Try it Yourself - Examples |
Images
thrown on the table
This example demonstrates how to create "polaroid" pictures and rotate the
pictures.
完全な CSS3 リファレンス
|