CSS3基礎教程

CSS3 渡過効果 CSS3 2D 変換

CSS3 3D 変換

CSS3 3D変換機能は3D空間の変換された要素

の3D変換

CSSを使用して3 3D変換機能を使用すると、3次元空間の要素に対して基本的な変換操作（移動、回転、拡大、倾斜など）を実行できます。

変換された要素は周囲の要素に影響を与えませんが、絶対位置の要素のように重ね合わせることができます。しかし、変換された要素はデフォルトの位置（変換されていない）では、レイアウトで空間を占めます。

CSS変換とTransform()関数の変換機能を使用して

CSS3 transform属性は変換機能を使用して、変換効果を適用するために要素の使用する座標系を操作します。

以下の部分は3D変換機能：

translate30度。

rotation3d()関数は3D空間の要素は[x, y, z]方向のベクトルを中心に指定角度で回転します。これをrotate(vx, vy, vz, angle)と書くことができます。

例

.container {
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　500px;
　　　　border:　4px solid #e5a043;
　　　　background: #fff2dd;
}
.transformed　{
　　　　-webkit-transform: トランスレート3d(25px,　25px,　50px);　/*　Chrome、Safari、Opera　*/
　　　　transform: トランスレート3d(25px,　25px,　50px);　
}

テストを見て‹/›

この機能translate3d(25px, 25px, 5画像をXとYの正方向に移動します25个像素，并沿Z轴正方向移动50个像素。

3D变换使用三维坐标系，但是沿Z方向的移动并不总是很明显，因为这些元素存在于二维平面（平面）上并且没有深度。

ピクセル、Z軸正方向に移動-0ピクセル。

D変換を使用して、Z方向の移動が常に明確ではありません。なぜなら、これらの要素は2次元平面（平面）上に存在し、深度を持っていないからです。Z軸上の高い要素（つまり観察者に近い要素が大きく見え、遠い要素が小さく見えるようにする）を使用して、perspectiveとperspective3originのCSS属性は、シーンに深度感を追加します。

rotate30度。

注意：3对一个元素应用3d()関数は[x, y, z]方向ベクトルに沿って要素を回転し、透視を設定しない場合、結果は3次元効果として表示されません。

例

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px　solid　#2b058;
　　　　background:  #f0f5d8;
}
.transformed　{
　　　　-webkit-D空間の要素を指定角度で回転します。rotate(vx, vy, vz, angle)の形式で書くことができます。3d(0,　1,　0,　6, 0, 0,　/*　Chrome、Safari、Opera　*/
　　　　D空間の要素を指定角度で回転します。rotate(vx, vy, vz, angle)の形式で書くことができます。3d(0,　1,　0,　6, 0, 0,　
}

テストを見て‹/›

transform: rotate3d(0, 1この機能rotate 6, 0,60度)でY軸に沿って画像を回転

scale30度。

scale30度。負の値を使用すると、反対方向に回転できます。

例

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4d()関数は要素の大きさを変更します。scale(sx, sy, sz)の形式で書くことができます。回転や透視などの他の変換機能と組み合わせない場合、この機能の効果はわかりません。以下の例を参照してください。6486px　solid　#
　　　　ab;9background:  #e3;
}
.transformed　{
　　　　-webkit-eef3d(1,　1,　2transform:  scale3d(1) rotate　6, 0, 0,　/*　Chrome、Safari、Opera　*/
　　　　eef3d(1,　1,　2transform:  scale3d(1) rotate　6, 0, 0,　
}

テストを見て‹/›

0度);3d(1, 1, 2関数scale3d(1)でZ軸に沿って要素を拡大縮小します、関数rotate 6, 0, 0,60度)でX軸に沿って画像を回転

d()機能を30度。

d()機能を3matrix3d()機能を一度にすべて4×4D変換、例えば平行移動、回転、拡大縮小などができます。これはによる変換。行列16の形式の

これはmatrix3d()機能の実行3D変換の例。

例

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px　solid　#d14e46;
　　　　background:  #fddddb;
}
.transformed　{
　　　　-webkit-transform:  マトリックス3d(0.359127,　-0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884,　0,　-0.913545, 0, 0.406737, 0, 0, 0, 0,　1);　/*　Chrome、Safari、Opera　*/
　　　　transform:  マトリックス3d(0.359127,　-0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884,　0,　-0.913545, 0, 0.406737, 0, 0, 0, 0,　1);　
}

テストを見て‹/›

ただし、一度に複数の変換を実行する場合、単一の変換関数を使用し、それらを順序にリストに記載する方が便利です。以下のようになります：

例

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px　solid　#2b058;
　　　　background:  #f0f5d8;
}
.transformed　{
　　　　-webkit-transform: トランスレート3d(0,　0,)　60px)　rotate3d(0,　1,　0,　-60deg)　scale3d(1,　1,　2);　/*　Chrome、Safari、Opera　*/
　　　　transform: トランスレート3d(0,　0,)　60px)　rotate3d(0,　1,　0,　-60deg)　scale3d(1,　1,　2);　
}

テストを見て‹/›

3D変換機能を

以下の表は、すべての3D変換機能。

機能	説明
translate3d(tx,ty,tz)	X、Y、Z軸に沿って要素を指定された量で移動します。
translateX(tx)	X軸に沿って要素を指定された量で移動します。
translateY(ty)	Y軸に沿って要素を指定された量で移動します。
translateZ(tz)	Z軸に沿って要素を指定された量で移動します。
rotate3d(x,y,z, a)	[x, y, z]方向ベクトルを中心に、最後の引数で指定された角度で回転します。3D空間の要素。
rotateX(a)	X軸を中心に要素を指定された角度で回転します。
rotateY(a)	Y軸を中心に要素を指定された角度で回転します。
rotateZ(a)	Z軸を中心に要素を指定された角度で回転します。
scale3d(sx,sy,sz)	X、Y、Z軸に沿って指定された量で要素を拡大します。この機能はscale3d(1,1,1)は無効です。
scaleX(sx)	X軸に沿って要素を拡大します。
scaleY(sy)	Y軸に沿って要素を拡大します。
scaleZ(sz)	Z軸に沿って要素を拡大します。
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	で16の値4×4変換マトリックスの形式で指定3D変換。
perspective(length)	定義3D変換の視点。通常、この関数値が増えると、要素は視聴者からより遠くに見えます。

CSS3 渡過効果 CSS3 2D 変換