3D 转换

CSS3 3D变换功能允许在3D空间中变换元素。

元素的3D转换

使用CSS3 3D变换功能，您可以对三维空间中的元素执行基本的变换操作，例如移动，旋转，缩放和倾斜。

变换后的元素不会影响周围的元素，但可以像绝对定位的元素一样将它们重叠。但是，变换后的元素在其默认位置（未变换）仍会在布局中占用空间。

使用CSS变换和Transform()函数变换功能

CSS3 transform属性使用变换功能来操纵元素使用的坐标系，以便应用变换效果。

以下部分描述了3D变换功能：

translate3d()功能

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: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
    transform: translate3d(25px, 25px, 50px); 
}

该功能translate3d(25px, 25px, 50px)将图像沿X和Y轴正方向移动25个像素，并沿Z轴正方向移动50个像素。

该功能rotate3d(0, 1, 0, 60deg)将图像沿Y轴旋转60度。您也可以使用负值沿相反方向旋转元素。

函数scale3d(1, 1, 2)沿Z轴缩放元素，函数rotate3d(1, 0, 0, 60deg)沿X轴旋转图像60度。

但是，一次执行多个转换时，使用单个转换函数并按顺序列出它们会更方便，如下所示：

.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转换功能

下表简要概述了所有3D转换功能。