PHP程序员小白到大牛集训(12期免息)
首页 >web前端 >前端问答 > 正文

css中translate是什么意思

原创2022-09-22 15:21:391066 + Vue前端学习QQ群(点击入群)

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

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

本教程操作环境: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):
登录后复制

7.png

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

例如:

transform:translateX(50px):
登录后复制

8.png

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

例如:

transform:translateY(50px):
登录后复制

9.png

示例:元素在网页中居中

代码:


	
		元素页面正中间居中
		
	
	
		
待居中元素
登录后复制

1.png

(学习视频分享:web前端

以上就是css中translate是什么意思的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:css
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    后端、前端、测试,同时在线协作,内容实时同步

    支持grpc,http,websocket,socketio,socketjs类型接口调试

    相关文章

    相关视频


    视频教程分类

    专题推荐

    官方公众号

    php中文网课程

    扫码关注官方公众号
    回复“phpcn01”领取php学习资料课程
    全套工具、电子书、脑图、内部课程等

    推荐视频教程

    开通VIP会员课 0元学

    热门推荐