CSS translate3d()函数

CSS translate3d()函数用于在三维空间中移动元素。

translate3d()函数的工作原理如下:

translate3d(tx, ty, tz)

它沿着x轴、y轴和z轴按提供的数量移动元素的位置。

沿x轴移动(水平)

下面是一个使用translate3d()沿着x轴(水平)移动元素的例子:

<style>
  .translated {
    transform: translate3d(60px,0,0);
  }
  div {
   	background: orange; 
  }
  div:after {
   	content: "90 x-axis 92";
    float: right;
  } 
</style>

<div>
  <img src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image"> 
</div>
<div>
  <img class="translated" src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image">
</div>

沿y轴(垂直)移动

下面是一个使用translate3d()沿着y轴(垂直)移动元素的例子:

<style>
  .translated {
    transform: translate3d(0,60px,0);
  }
</style>

<img src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image"> 
<img class="translated" src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image">

沿着z轴移动

下面是一个使用translate3d()沿着z轴移动元素的示例。这将元素移向或移离查看器。

<style>
  .translated {
    transform: perspective(200px) translate3d(0,0,60px);
  }
</style>

<img src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image"> 
<img class="translated" src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image">

你可以把z轴想象成从屏幕向观众的方向。因此，沿着这个轴的移动对观众来说不一定是明显的，除非你应用了其他样式来显示效果。

在本例中，还包含了perspective函数，以演示translate3d()的效果。结果是，该元素似乎比其他元素更接近查看器。

沿着所有轴移动

下面是一个使用translate3d()沿着所有轴移动元素的例子:

<style>
  .translated {
    transform: perspective(200px) translate3d(60px,60px,60px);
  }
</style>

<img src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image"> 
<img class="translated" src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image">

使用负数

如果需要，还可以提供负值。这将导致元素出现在离用户更远的地方。

<style>
  .translated {
    transform: perspective(200px) translate3d(-10px,-10px,-60px);
  }
</style>

<img src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image"> 
<img class="translated" src="/pix/bg/tiles/checkerboard_100x100_2.gif" alt="Sample image">

官方语法

translate3d()函数的正式语法如下:

translate3d() = translate3d( <translation-value> , <translation-value> , <length> )

接受的值的类型

translate3d()函数接受前两个参数的< translation-value >值，以及第三个参数的<length>。所有参数都指定元素在各自平面上的移动量。

< translation-value 值>是一个<length>(例如10px, 10vw等)，它也可以是一个没有单位标识符的数字。

在这种情况下，数字被解释为“用户单元”。初始坐标系中的用户单位相当于父环境中的像素单位