CSS函数: translate、translate3d的使用

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>

展示结果:

示例代码:CSS translate函数使用示例 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/25034.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LLVM Cpu0 新后端4

想好好熟悉一下llvm开发一个新后端都要干什么&#xff0c;于是参考了老师的系列文章&#xff1a; LLVM 后端实践笔记 代码在这里&#xff08;还没来得及准备&#xff0c;先用网盘暂存一下&#xff09;&#xff1a; 链接: https://pan.baidu.com/s/1V_tZkt9uvxo5bnUufhMQ_Q?…

向量数据库是什么?

向量数据库是什么&#xff1f; 随着人工智能和机器学习技术的迅猛发展&#xff0c;向量数据库作为一种新型数据库引起了广泛关注。向量数据库专门用于存储和查询高维向量数据&#xff0c;是在大规模数据检索和相似性搜索领域的重要工具。 向量数据库的定义 向量数据库是一种…

#09 Stable Diffusion动画制作入门

文章目录 前言1. 理解Stable Diffusion2. 动画制作的基本概念3. 准备阶段3.1 设计文本提示3.2 选择参数 4. 制作过程4.1 生成图像序列4.2 合成动画 5. 后期处理5.1 调色和特效5.2 输出格式 6. 最佳实践结论 前言 随着AI技术的飞速发展&#xff0c;Stable Diffusion作为一种先进…

定时清理Linux服务器缓存shell脚本

服务器内存占用过高,如何定时清理一下服务器内存呢?写一个清理缓存脚本,加入到定时任务中。 一、编写脚本 clear_cache.sh 脚本,放到home目录下。 #!/bin/bash# 清除页面缓存、目录项和 inode 缓存 sudo sync echo 3 | sudo tee /proc/sys/vm/drop_caches# 记录执行时间到日…

为下一波创新做准备:人工智能和元宇宙

人工智能和元宇宙的发展带来了独特的可能性和挑战。随着这些技术的发展&#xff0c;我们进入了一个沉浸式虚拟体验和智能系统的时代&#xff0c;我们正站在一个历史性的时刻。为迎接下一波创新&#xff0c;采取必要的措施是很重要的。 我们正在见证两项变革性技术的激动人心的发…

qt中网络编程关于QNetworkReply导致崩溃

现场项目上线之后&#xff0c;使用中总是闪退&#xff0c;release版本exe不好查找问题&#xff0c;困扰了我好几天&#xff0c;最后发现导致问题的可能点是&#xff1a;由于请求的网址都是一样的&#xff0c;只是请求数据不一样&#xff0c;所以只使用了一个reply&#xff0c;即…

数据赋能(113)——体系:监控数据采集——实施过程、应用特点

实施过程 监控数据采集的实施过程通常包括以下步骤&#xff1a; 明确监控目标&#xff1a;需要明确监控数据的采集目标&#xff0c;包括需要监控哪些数据、监控的目的以及预期的监控效果。确定监控数据源&#xff1a;确定监控数据来源&#xff0c;这包括各种数据库、网络设备…

WebSocket前端分页:技术深度、实践困境与未来展望

WebSocket前端分页&#xff1a;技术深度、实践困境与未来展望 在前端开发的广阔领域中&#xff0c;WebSocket前端分页技术以其独特的优势逐渐崭露头角。它不仅为开发者带来了全新的交互体验&#xff0c;也为用户带来了更加流畅和高效的信息获取方式。然而&#xff0c;这一技术…

以sqlilabs靶场为例,讲解SQL注入攻击原理【54-65关】

【Less-54】 与前面的题目不同是&#xff0c;这里只能提交10次&#xff0c;一旦提交超过十次&#xff0c;数据会重新刷新&#xff0c;所有的步骤需要重来一次。 解题步骤&#xff1a; 根据测试&#xff0c;使用的是单引号闭合。 # 判断字段的数量 ?id1 order by 3 -- aaa# …

WPF视频学习-基础知识篇

1.简介WPF&#xff1a; C# 一套关于windows界面应用开发框架 2.WPF和winform的差别 &#xff0c;(WPF比较新) 创建新项目使用模板&#xff1a; WPF使用.xaml后缀&#xff0c;双击可查看操作界面和设置代码&#xff0c;其文件展开之后中有MainWindow.xaml.cs为程序交互逻辑。…

云上小知识:企业选择云服务的小Tips

企业在选择云服务模式时&#xff0c;应综合考虑以下几个关键因素&#xff1a; 1. 业务需求与场景 企业需要根据自身的业务特点和需求来选择合适的云服务模式。例如&#xff0c;如果企业的用户分布广泛&#xff0c;需要跨地域提供服务&#xff0c;那么公有云可能是更好的选择。…

【Python】数据处理:文本文件操作

在Python中&#xff0c;处理文本文件是非常常见的任务。可以使用内置的open函数来打开、读取和写入文本文件。 打开文件 使用open函数打开文件。该函数有两个主要参数&#xff1a; open(file, moder, buffering-1, encodingNone, errorsNone, newlineNone, closefdTrue, ope…

Windows 批处理(bat) 中文件操作使用教程

文章目录 dir&#xff1a;列出当前目录下的文件和子目录cd&#xff1a;改变当前目录md 或 mkdir&#xff1a;创建新目录rd 或 rmdir&#xff1a;删除目录del&#xff1a;删除一个或多个文件copy&#xff1a;复制文件到另一个位置xcopy&#xff1a;用于复制目录及其内容到另一个…

#08 文本到图像转换:Stable Diffusion的创意应用

文章目录 前言1. 文本提示的艺术1.1 创意描述1.2 故事叙述 2. 图像生成的技巧2.1 参数调整2.2 风格迁移 3. 创意应用实例3.1 艺术创作3.2 商业设计3.3 社交媒体内容 4. 实践指南4.1 实验与迭代4.2 学习与借鉴4.3 版权与伦理 结论 前言 Stable Diffusion作为一种先进的AI图像生…

mysqldump常用备份数据库命令

mysqldump 是 MySQL 数据库的官方命令行备份工具。以下是一些常用的 mysqldump 数据库备份命令示例&#xff1a; 备份单个数据库&#xff1a; mysqldump -u username -p database_name > database_name_backup.sql这里 username 是你的数据库用户名&#xff0c;database_nam…

JVM:Java虚拟机探秘

JVM&#xff1a;Java虚拟机探秘 简介 Java Virtual Machine&#xff08;JVM&#xff09;&#xff0c;作为Java技术的核心&#xff0c;是一个抽象化的计算模型&#xff0c;负责执行Java字节码。它不仅为Java程序提供了跨平台运行的能力&#xff0c;还通过内存管理、垃圾回收、…

OmniGlue: Generalizable Feature Matching with Foundation Model Guidance

【引用格式】&#xff1a;Jiang H, Karpur A, Cao B, et al. OmniGlue: Generalizable Feature Matching with Foundation Model Guidance[J]. arXiv preprint arXiv:2405.12979, 2024. 【网址】&#xff1a;https://arxiv.org/pdf/2405.12979 【开源代码】&#xff1a;https…

Redis中的主从复制

分布式系统中的几种Redis部署方式 为了解决一个程序只部署在一个服务器上的单点问题&#xff1a; 可用性问题&#xff0c;如果这个机器挂了&#xff0c;就意味着服务就中断了 一个程序只部署在一台机器上&#xff0c;它的性能/支持的并发量也是有限的 所以&#xff0c;就引…

力扣 240.搜素矩阵II

题目描述&#xff1a; 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,9…

openpose标定中棋盘格检测错误的解决方案

文章目录 1、openpose 棋盘格检测流程2、解决过程3、实测结果1、openpose 棋盘格检测流程 在opencv中通过调用cv::findChessboardCorners()函数,同时指定棋盘格内角点尺寸来检测画面中的棋盘格,结果将以一定顺序来保存结果。通常指定尺寸的两个纬度的值不能相同,例如当指定…