CSS函数: translate、translate3d的利用

translate()和translate3d()函数可以实现元素在指定轴的平移的功能。函数利用在CSS转换属性transform的属性值。实现转换的函数类型有：

• translate()：2D平面实现X轴、Y轴的平移
  
• translate3d()：3D空间实现位置的平移
  
• translateX()：实现X轴方向的元素移动
  
• translateY()：实现Y轴方向的元素移动
  

translate()

translate()函数用于移动元素在2D平面的位置，其语法格式如下：

1. translate(tx)       或
2. translate(tx, ty)

复制代码

• tx：须要移动的x轴距离
  
• ty：须要移动的y轴距离
  

示例代码如下：

1. <style>
2. .container .translate>div>div {
3.     display: inline-block;
4.     padding: 30px;
5.     background-color: aqua;
6. }
7. .container .translate>div>.result {
8.     transform: translate(-10px,10px);
9.     background-color: red;
10. }
12. </style>
14. <div class="translate">
15.    <h3>translate函数使用</h3>
16.    <div>
17.        <div class="original ">original container</div>
18.        <div class="result">translate函数使用(100,200) container</div>
19.    </div>
20. </div>

复制代码

展示结果：

translate3d()

translate3d()函数用于将元素在3D空间中移动一个元素的位置。语法格式如下：

1. translate3d(tx, ty, tz)

复制代码

• tx：移动元素X轴位置。
  
• ty：移动元素Y轴位置。
  
• tz：移动元素z坐标，不能是百分比。
  

示例代码如下：

1. <style>
2. .container .translate3d>div>div {
3.     display: inline-block;
4.     padding: 30px;
5.     background-color: aqua;
6. }
7. .container .translate3d>div>.result {
8.      transform: perspective(500px) translate3d(10px,0px,100px);
9.     background-color: red;
10. }
11. </style>
12. <div class="translate3d">
13.    <h3>translate3d函数使用</h3>
14.    <div>
15.        <div class="original ">original container</div>
16.        <div class="result">translate3d(10px,0px,100px)函数使用 container</div>
17.    </div>
18. </div>

复制代码

展示结果：

translateX()

translateX()函数用于移动2D平面上的X轴距离，其语法格式如下：

1. translateX(t)

复制代码

示例代码如下：

1. <style>
2. .container .translateX>div>div {
3.     display: inline-block;
4.     padding: 30px;
5.     background-color: aqua;
6. }
7. .container .translateX>div>.result {
8.      transform: translateX(100px);
9.     background-color: red;
10. }
11. </style>
12. <div class="translateX">
13.    <h3>translateX函数使用</h3>
14.    <div>
15.        <div class="original ">original container</div>
16.        <div class="result">translateX(10px)函数使用 containerr</div>
17.    </div>
18. </div>

复制代码

展示结果：

translateY()

translateY()函数用于移动2D平面上的Y轴距离，其语法格式如下：

1. translateY(t)

复制代码

示例代码如下：

1. <style>
2. .container .translateY>div>div {
3.     display: inline-block;
4.     padding: 30px;
5.     background-color: aqua;
6. }
7. .container .translateY>div>.result {
8.     transform: translateY(10px);
9.     background-color: red;
10. }
11. </style>
12. <div class="translateY">
13.    <h3>translateY函数使用</h3>
14.    <div>
15.        <div class="original ">original container</div>
16.        <div class="result">translateY(10px)函数使用 containerr</div>
17.    </div>
18. </div>

复制代码

展示结果：

ranslateZ()

translateZ()函数用于移动3D空间上的Z轴距离，其语法格式如下：

1. translateZ(t)

复制代码

示例代码如下：

1. <style>
2. .container .translateZ>div>div {
3.     display: inline-block;
4.     padding: 30px;
5.     background-color: aqua;
6. }
7. .container .translateZ>div>.result {
8.     transform: perspective(200px) translateZ(-100px);
9.     background-color: red;
10. }
11. </style>
12. <div class="translateZ">
13.    <h3>translateZ函数使用</h3>
14.    <div>
15.        <div class="original ">original container</div>
16.        <div class="result">translateZ(-100px)函数使用 containerr</div>
17.    </div>
18. </div>

复制代码

展示结果：

示例代码：CSS translate函数利用示例 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。