Mozilla Developer Networkこの文書は翻訳中です。他国語のままの部分などがあるのはその為です。
是非お気軽に MDN に登録して翻訳に参加し、私たちの手助けをして下さい！
CSS transform はアフィン / 線形変換を HTML 要素に対して適用する一連の CSS プロパティによって実現されます。変換には回転、スキュー（傾き）、拡大縮小、平行移動が含まれます。
CSS transforms properties
Two major properties are used to define CSS transforms: transform and transform-origin
-
transform-origin - Specifies the position of the origin. By default it is at the top left corner of the element and can be moved. It is used by several transforms, like rotations, scaling or skewing, that need a specific point as parameter.
-
transform - Specifies the transforms to apply to the element. It is a space separated list of transform, which are applied one after the other, like requested by the composition operation.
例
Example: Rotating
This example creates an iframe that lets you use Google's home page, rotated 90 degrees about its bottom-left corner.
View live example View screenshot of example
<div style="transform: rotate(90deg); transform-origin: bottom left;"> <iframe src="/old?u=http%3A%2F%2Fwww.google.com%2F&y=1999" width="500" height="600"></iframe> </div>
Example: Skewing and translating
This example creates an iframe that lets you use Google's home page, skewed by 10 degrees and translated by 150 pixels on the X axis.
View live example View screenshot of example
<div style="transform: skewx(10deg) translatex(150px);
transform-origin: bottom left;">
<iframe src="/old?u=http%3A%2F%2Fwww.google.com%2F&y=1999" width="600" height="500"></iframe>
</div>
3D specific CSS properties
Performing CSS transformations in the space is a little bit more complex. You have to start by configuring the 3D space by giving it a perspective, then you have to configure how your 2D elements will behave in that space.
Setting up a perspective
The first element to set is the perspective. The perspective is what gives the 3D impression. The farther from the viewer the elements are, the smaller there are.
How quick they shrink is defined by the perspective property. The smaller its value is, the deeper the perspective is.
perspective:0; |
perspective:250px; |
|---|---|
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
perspective:300px; |
perspective:350px; |
|---|---|
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
The second element to configure is the position of the viewer, with the perspective-origin property. By default, the perspective is centered on the viewer, which is not always adequate.
perspective-origin:150px 150px; |
perspective-origin:50% 50%; |
perspective-origin:-50px -50px; |
|---|---|---|
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
1
2
3
4
5
6
|
Once you have done this, you can work on the element in the 3D space.
関連情報
- transform 関連 CSS プロパティ :
backface-visibility、perspective、perspective-origin、transform、transform-origin、transform-style - Using deviceorientation with 3D Transforms
- Intro to CSS 3D transforms (Blog post by David DeSandro)
