css中translate的含义是什么

translate的意思为“移动”,是css内置的一个函数,与transform属性配合使用,可以将元素沿着水平方向(X轴)和垂直方向(Y轴)移动。translate的使用分为3种情况:1、“translateX(x)”,元素仅在水平方向移动;2、“translateY(y)”,元素仅在垂直方向移动;3、“transklate(x,y)”,元素在水平方向和垂直方向同时移动。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

translate的意思为:移动、平移、位移。

CSS transform: translate

在CSS中,translate()方法与transform属性配合使用,可以将元素沿着水平方向(X轴)和垂直方向(Y轴)移动。

对于位移translate()方法,我们分为3种情况:

  • translateX(x):元素仅在水平方向移动(X轴移动);

  • translateY(y):元素仅在垂直方向移动(Y轴移动);

  • transklate(x,y):元素在水平方向和垂直方向同时移动(X轴和Y轴同时移动)

其中:

  • x表示元素在水平方向(X轴)的移动距离,当x为正时,表示元素在水平方向向右移动(X轴正方向);当x为负时,表示元素在水平方向向左移动(X轴负方向)。

  • y表示元素在水平方向(y轴)的移动距离,当y为正时,表示元素在垂直方向向下移动;当y为负时,表示元素在垂直方向向上移动。

  • 在W3C规定中,出于人的习惯是从上到下阅读,所选取的坐标系中x轴正方向向右,而y轴正方向向下。

  • 在CSS3中,所有变形方法都是属于transform属性,因此所有关于变形的方法前面都要加上“tranform:”,以表示“变形”处理。这一点大家一定要记住。

  • 单位为px、em或百分比等,x,y为百分数时,是相当于移动的元素的宽+padding,高+padding的百分比。

1、translate(x, y) :定义2D移动转化

x 是名列前茅个过渡值参数,y 是第二个过渡值参数选项。如果未被提供,则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移,按照设定的x,y参数值,当值为负数时,反方向移动物体,其基点默认为元素中心点,也可以根据transform-origin进行改变基点。

例如:

transform:translate(50px,50px):

css中translate的含义是什么

2、translate(x):指定X轴方向上的一个移动

例如:

transform:translateX(50px):

css中translate的含义是什么

3、translate(y):指定Y轴方向上的一个移动

例如:

transform:translateY(50px):

css中translate的含义是什么

示例:元素在网页中居中

代码:

<html>	<head>		<title>元素页面正中间居中</title>		<style>				html,body{					height: 100%;					margin: 0;					padding: 0;					background-color: #2b9f6b			}			div{			  width: 450px;				height: 300px;				background-color: #abcdef;				position: absolute;				left: 50%;				较好: 50%;				transform: translate(-50%,-50%);				text-align: center;			}		</style>	</head>	<body>		<div>待居中元素</div>	</body></html>

css中translate的含义是什么

到此,关于“css中translate的含义什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

文章标题:css中translate的含义是什么,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/28716

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月22日 下午9:57
下一篇 2022年9月22日 下午9:58

相关推荐

  • internet中怎么达到共享传输线路的目的

    internet中主要采用路由技术来达到共享传输线路的目的;路由技术主要是指路由选择算法、因特网的路由选择协议的特点及分类,其中路由选择算法可以分为静态路由选择算法和动态路由选择算法,因特网的路由选择协议的特点是属于自适应的选择协议,是分布式路由选择协议,采用分层次的路由选择协议。 本教程操作环境:…

    2022年8月30日
    30400
  • 如何使用mediacreationtool重装系统

    根据目前的测试,使用这个方法可以解决的问题包括但不限于: 1.系统组件损坏,部分系统文件缺失; 2.升级到11月更新后Windows 10出现的开始菜单、任务栏图标无法使用的情况; 3.在Windows 10 10565之后的版本使用PowerShell重置命令导致自带应用和应用商店无法使用的情况(…

    2022年9月1日
    51200
  • roaming文件夹有什么作用

    roaming文件夹是用于存放一些程序运行后产生的数据文件的;该文件夹是Windows存放一些使用程序后产生的数据文件,如软件听音乐,登入的号码等而缓存的一些数据,若删除该文件夹不会对系统产生什么影响,但是会对软件造成一定的影响,建议不要删除。 本教程操作环境:windows10系统、DELL G3…

    2022年9月8日
    1.5K00
  • ftp服务器搭建部署与C#实现ftp文件上传的方法是什么

    一、简介 FTP是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文本协议”。用于Internet上的控制文件的双向传输。同时,它也是一个应用程序(Application)。基于不同的操作系统有不同的FTP应用程序,而所有这些应用程序都遵守同一种协议以传输文件。…

    2022年9月15日
    87300
  • 如何使用Masscan、Nmap、ELK做内网资产收集

    安装 安装masscan # yum install git gcc make libpcap-devel# git clone https://github.com/robertdavidgraham/masscan# cd masscan# make# cp bin/masscan /bin 安…

    2022年9月8日
    74400
  • mysql如何关闭事务

    mysql关闭事务的步骤:1、使用“win+r”键打开“运行”窗口,输入cmd并回车,打开cmd命令窗口;2、在cmd窗口中,执行“mysql -u root -p”命令并输入密码来登录mysql服务,进入MySQL界面;3、在MySQL命令界面中,执行“start transaction;”或者“…

    2022年9月24日
    1.2K00
  • excel下拉列表怎么添加新内容

    excel下拉列表添加新内容的方法: 1、说先点击添加好的下拉,查看里面的内容。 2、之后选择这个下拉,点击任务栏的“数据”。 3、之后在点击下面的“数据验证”。 4、在弹出的窗口中进入设置,在“来源”中添加要新增的内容, 最后点击确定即可。 以上就是“excel下拉列表怎么添加新内容”这篇文章的所…

    2022年8月27日
    1.0K00
  • C语言数据结构之栈与队列怎么相互实现

    一、用对列实现栈 题干要求: 细节分析:队列是先进先出; 要实现的栈是先进后出。 解题思路:假设:先用一个队列储存数据 N 个,然后将前 N-1 个数据导入到另一个队列, 此时,原始队列中仅剩一个,是最后剩的数据,便可将其导出,这便是一次后进先出。 细节点:每次导出数据时,都需要一个队列向另一个队列…

    2022年9月21日
    42900
  • 电脑键盘锁住了如何解决

    键盘锁住了的解决方法 1、如果着急打字的话,按“ctrl”加“win”键加“o”键,调出软键盘打字。 2、右键点击此电脑的“管理”,点击进入“系统工具”。 3、点击“设备管理器”,点击“键盘”。 4、右键点击“更新驱动程序”即可。 读到这里,这篇“电脑键盘锁住了如何解决”文章已经介绍完毕,想要掌握这…

    2022年9月6日
    52400
  • windows浩辰cad看图王怎么使用

    浩辰cad看图王使用方法: 1、首先我们下载安装这款软件 2、下载安装完成后,双击软件图标来打开它。 3、点击左上角的软件图标,选择“打开” 4、然后在其中找到并选中想要打开的图纸,点击“打开” 5、这样我们就可以在其中查看或编辑图纸了。 6、软件拥有编辑模式和览图模式两种,用户可以根据自己的需求来…

    2022年9月20日
    71600
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部