CSS3 3D 轉(zhuǎn)換

CSS3 3D變換功能允許在3D空間中變換元素。

元素的3D轉(zhuǎn)換

使用CSS3 3D變換功能，您可以對(duì)三維空間中的元素執(zhí)行基本的變換操作，例如移動(dòng)，旋轉(zhuǎn)，縮放和傾斜。

變換后的元素不會(huì)影響周圍的元素，但可以像絕對(duì)定位的元素一樣將它們重疊。但是，變換后的元素在其默認(rèn)位置（未變換）仍會(huì)在布局中占用空間。

使用CSS變換和Transform()函數(shù)變換功能

CSS3 transform屬性使用變換功能來操縱元素使用的坐標(biāo)系，以便應(yīng)用變換效果。

以下部分描述了3D變換功能：

translate3d()功能

rotation3d()函數(shù)將3D空間中的元素圍繞[x，y，z]方向向量為圓點(diǎn)旋轉(zhuǎn)指定角度。 這可以寫成rotate(vx，vy，vz，angle)。

示例

.container {
    width: 125px;
    height: 125px;
    perspective: 500px;
    border: 4px solid #e5a043;
    background: #fff2dd;
}
.transformed {
    -webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
    transform: translate3d(25px, 25px, 50px); 
}

該功能translate3d(25px, 25px, 50px)將圖像沿X和Y軸正方向移動(dòng)25個(gè)像素，并沿Z軸正方向移動(dòng)50個(gè)像素。

 

3D變換使用三維坐標(biāo)系，但是沿Z方向的移動(dòng)并不總是很明顯，因?yàn)檫@些元素存在于二維平面（平面）上并且沒有深度。

通過使Z軸上較高的元素（即距觀看者更近的元素看起來較大，而離觀看者更遠(yuǎn)的元素看起來更小），可以使用perspective和perspective-origin的CSS屬性為場景添加深度感。

rotate3d()功能

該rotate3d()函數(shù)圍繞[x，y，z]方向向量將3D空間中的元素旋轉(zhuǎn)指定角度?？梢詫懗蓃otate(vx, vy, vz, angle)。

.container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #a2b058;
    background: #f0f5d8;
}
.transformed {
    -webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
    transform: rotate3d(0, 1, 0, 60deg); 
}

該功能rotate3d(0, 1, 0, 60deg)將圖像沿Y軸旋轉(zhuǎn)60度。您也可以使用負(fù)值沿相反方向旋轉(zhuǎn)元素。

 

scale3d()功能

scale3d()函數(shù)更改元素的大小?？梢詫懗蓅cale(sx, sy, sz)。除非將其與旋轉(zhuǎn)和透視圖等其他變換功能結(jié)合使用，否則此功能的效果并不明顯，如下例所示。

.container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #6486ab;
    background: #e9eef3;
}
.transformed {
    -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); 
}

函數(shù)scale3d(1, 1, 2)沿Z軸縮放元素，函數(shù)rotate3d(1, 0, 0, 60deg)沿X軸旋轉(zhuǎn)圖像60度。

 

matrix3d()功能

matrix3d()功能可以一次執(zhí)行所有3D轉(zhuǎn)換，例如平移，旋轉(zhuǎn)和縮放。它采用4×4轉(zhuǎn)換矩陣形式的16個(gè)參數(shù)。

這是使用matrix3d()功能執(zhí)行3D轉(zhuǎn)換的示例。

.container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #d14e46;
    background: #fddddb;
}
.transformed {
    -webkit-transform: matrix3d(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: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); 
}

但是，一次執(zhí)行多個(gè)轉(zhuǎn)換時(shí)，使用單個(gè)轉(zhuǎn)換函數(shù)并按順序列出它們會(huì)更方便，如下所示：

.container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #a2b058;
    background: #f0f5d8;
}
.transformed {
    -webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Chrome, Safari, Opera */
    transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); 
}

3D轉(zhuǎn)換功能

下表簡要概述了所有3D轉(zhuǎn)換功能。