CSS3 3D conversion

CSS3 3La fonction de transformation D permet de3Transformation de l'élément dans l'espace D.

de l'élément3Transformation D

Utilisation de CSS3 3La fonction de transformation D permet d'exécuter des opérations de transformation de base sur les éléments de l'espace tridimensionnel, telles que le déplacement, la rotation, l'augmentation et l'inclinaison.

Les éléments transformés n'affectent pas les éléments environnants, mais peuvent être superposés comme les éléments positionnés en absolu. Cependant, les éléments transformés occupent encore de l'espace dans le layout à leur position par défaut (non transformés).

Utilisation des fonctions de transformation CSS et Transform()

CSS3 L'attribut transform utilise les fonctions de transformation pour manipuler le système de coordonnées utilisé par l'élément afin d'appliquer les effets de transformation.

La partie suivante décrit3Fonction de transformation D :

translate3d()功能

rotation3La fonction d() permet de3Les éléments dans l'espace D tournent autour du point de rotation vers la direction du vecteur [x, y, z] d'un angle spécifié. Cela peut être écrit sous la forme rotate(vx, vy, vz, angle).

示例

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

Cette fonction translate3d(25px, 25px, 5Déplacer l'image le long des axes X et Y dans le sens positif25个像素，并沿Z轴正方向移动50个像素。

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

通过使Z轴上较高的元素（即距观看者更近的元素看起来较大，而离观看者更远的元素看起来更小），可以使用perspective和perspective-origin的CSS属性为场景添加深度感。

rotate3d()功能

该rotate3d()函数围绕[x，y，z]方向向量将3D空间中的元素旋转指定角度。可以写成rotate(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轴旋转60度。您也可以使用负值沿相反方向旋转元素。

scale3d()功能

scale3d()函数更改元素的大小。可以写成scale(sx, sy, sz)。除非将其与旋转和透视图等其他变换功能结合使用，否则此功能的效果并不明显，如下例所示。

.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);　
}

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

matrix3d()功能

matrix3d()功能可以一次执行所有3D转换，例如平移，旋转和缩放。它采用4×4转换矩阵形式的16个参数。

这是使用matrix3d()功能执行3D转换的示例。

.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);　
}

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

.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);　
}

3Fonctions de conversion D

Le tableau suivant résume brièvement tous3Fonction de conversion D.