CSS函数: translate、translate3d的使用

胖蔡

已于 2024-06-05 16:44:36 修改

阅读量2.3k

点赞数 3

分类专栏： CSS 函数讲解文章标签： css 3d 前端 translate

于 2024-06-05 16:43:07 首次发布

本文链接：https://blog.csdn.net/chf1142152101/article/details/139476271

版权

本文详细介绍了CSS中的translate、translate3d以及translateX、translateY、translateZ等函数，阐述了它们在2D和3D空间中实现元素平移的用法，并通过示例代码展示了不同函数的应用效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

translate()

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

translate(tx)       或
translate(tx, ty)

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

示例代码如下：

<style>
.container .translate>div>div {
    display: inline-block;
    padding: 30px;
    background-color: aqua;
}
.container .translate>div>.result {
    transform: translate(-10px,10px);
    background-color: red;
}

</style>

<div class="translate">
   <h3>translate函数使用</h3>
   <div>
       <div class="