网站首页 > 知识剖析 正文
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="original ">original container</div>
<div class="result">translate函数使用(100,200) container</div>
</div>
</div>
展示结果:
translate3d()
translate3d()函数用于将元素在3D空间中移动一个元素的位置。语法格式如下:
translate3d(tx, ty, tz)
- tx:移动元素X轴位置。
- ty:移动元素Y轴位置。
- tz:移动元素z坐标,不能是百分比。
示例代码如下:
<style>
.container .translate3d>div>div {
display: inline-block;
padding: 30px;
background-color: aqua;
}
.container .translate3d>div>.result {
transform: perspective(500px) translate3d(10px,0px,100px);
background-color: red;
}
</style>
<div class="translate3d">
<h3>translate3d函数使用</h3>
<div>
<div class="original ">original container</div>
<div class="result">translate3d(10px,0px,100px)函数使用 container</div>
</div>
</div>
展示结果:
translateX()
translateX()函数用于移动2D平面上的X轴距离,其语法格式如下:
translateX(t)
示例代码如下:
<style>
.container .translateX>div>div {
display: inline-block;
padding: 30px;
background-color: aqua;
}
.container .translateX>div>.result {
transform: translateX(100px);
background-color: red;
}
</style>
<div class="translateX">
<h3>translateX函数使用</h3>
<div>
<div class="original ">original container</div>
<div class="result">translateX(10px)函数使用 containerr</div>
</div>
</div>
展示结果:
translateY()
translateY()函数用于移动2D平面上的Y轴距离,其语法格式如下:
translateY(t)
示例代码如下:
<style>
.container .translateY>div>div {
display: inline-block;
padding: 30px;
background-color: aqua;
}
.container .translateY>div>.result {
transform: translateY(10px);
background-color: red;
}
</style>
<div class="translateY">
<h3>translateY函数使用</h3>
<div>
<div class="original ">original container</div>
<div class="result">translateY(10px)函数使用 containerr</div>
</div>
</div>
展示结果:
ranslateZ()
translateZ()函数用于移动3D空间上的Z轴距离,其语法格式如下:
translateZ(t)
示例代码如下:
<style>
.container .translateZ>div>div {
display: inline-block;
padding: 30px;
background-color: aqua;
}
.container .translateZ>div>.result {
transform: perspective(200px) translateZ(-100px);
background-color: red;
}
</style>
<div class="translateZ">
<h3>translateZ函数使用</h3>
<div>
<div class="original ">original container</div>
<div class="result">translateZ(-100px)函数使用 containerr</div>
</div>
</div>
展示结果:
猜你喜欢
- 2024-11-27 Google Research:对偶性解法,赋予强化学习更多可能性
- 2024-11-27 炫酷的背景桌面制作,替换图片即可
- 2024-11-27 有趣的 CSS 数学函数
- 2024-11-27 每天一个CSS小技巧 - 梯形标签页
- 2024-11-27 CSS3之3D魔方鼠标控制酷炫效果
- 2024-11-27 谁说RL智能体只能在线训练?谷歌发布离线强化学习新范式
- 2024-11-27 Photo Perspective Pro图像修正透视软件
- 2024-11-27 openCVjs图像处理之手动矫正
- 2024-11-27 高性能的零拷贝技术原理你真懂吗?
- 2024-11-27 「Web前端开发进阶篇」CSS3 2D/3D转化
- 最近发表
-
- 表格存储 SQL 查询多元索引(表格存储 sql 查询多元索引的方法)
- 数据库教程-SQL Server多条件模糊查询
- Twitch宣布放弃Flash并逐步转型至HTML5平台
- 移动平台最强播放器MX Player:终于支持安卓5.0了!
- win10 NFS+黑群晖远程加载管理Windows文件夹(读写NTFS格式+高清播放器)
- Android端VLC 3.3版本发布,重新设计播放器界面
- 不仅仅被苹果封杀!Youtube宣布迁移Flash
- 揭开网站背后的魔法:B/S系统原来这么简单!
- Adobe Animate (An) 2020网页设计软件下载和安装教程
- Adobe发布“巨量”安全更新:遏制Flash“祸害”Linux
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)