CSS translate3d实例讲解

发布时间：2025-12-09 12:00:58 浏览次数：2

translate3d()函数是一个内置函数,用于在3D空间中重新定位元素。

用法:

translate3d( tx, ty, tz )

参数:此函数接受上述和以下所述的三个参数:

tx:此参数保存对应于x轴的平移长度。此参数以数字或百分比形式保存值。
ty:此参数保存对应于y轴的平移长度。此参数以数字或百分比形式保存值。
tz:此参数保存对应于z-axis的翻译长度。此参数仅以数字形式保存值。

以下示例说明了CSS中的translate3d()函数:

范例1:

<!DOCTYPE html> <html>   <head>     <title>       CSS translate3d() function   </title>     <style>         body {             text-align:center;         }                   h1 {             color:green;         }                   .translate3d_image {             transform:translate3d(100px, 0, 0);         }     </style> </head>   <body>     <h1>GeeksforGeeks</h1>     <h2>CSS translate3d() function</h2>       <h4>Original Image</h4>     <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"          alt="GeeksforGeeks logo">     <br>       <h4>Translated image</h4>     <img           src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"          alt="GeeksforGeeks logo"> </body>   </html>

输出:

范例2:

<!DOCTYPE html>  <html>  <head>      <title>CSS translate3d() function</title>      <style>          body {             text-align:center;         }         h1 {             color:green;         }         .GFG {             font-size:35px;             font-weight:bold;             color:green;         }         .geeks {             transform:translate3d(100px, 20px, 0);         }     </style>  </head>    <body>      <h1>GeeksforGeeks</h1>     <h2>CSS translate3d() function</h2>           <h4>Original Element</h4>     <p >Welcome to GeeksforGeeks</p>           <h4>Translated Element</h4>     <p >Welcome to GeeksforGeeks</p>  </body>  </html>

输出:

支持的浏览器:以下列出了translate3d()函数支持的浏览器:

谷歌浏览器
IE浏览器
火狐浏览器
苹果浏览器
Opera

translate3d

上一篇：携程开源数据库访问框架下一篇：JavaWeb-配置Filter的dispatcher节点

知识问答

CSS translate3d实例讲解

综合百科

网站导航