Html+CSS transform属性中的 translate属性值
2016-03-21 17:23
489 查看
上一篇讲了rotate,这一次我们再细讲一下translate
下面我们从3个方面开始介绍:
1、translate(x,y) 水平方向和垂直方向同时移动,
取值x表示x轴过渡值
取值y表示y轴过渡值 ----如果没有赋值,默认是0
默认以元素的中心点为基点,可以通过transform-origin进行基点的设置
x,y如果为负就反方向移动
Css代码
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/23/276a3b17019081ce24d65dc582df0c93.png)
translate(100px,200px);
2、translateX(<translation-value>) 通过给x方向上的指定参数值,实现x轴方向上的移动。
Css代码
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/23/276a3b17019081ce24d65dc582df0c93.png)
translateX(100px);
3、translateY(<translation-value>) 通过给y方向上的指定参数值,实现x轴方向上的移动。
Css代码
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/23/276a3b17019081ce24d65dc582df0c93.png)
translateY(200px);
下面我们从3个方面开始介绍:
1、translate(x,y) 水平方向和垂直方向同时移动,
取值x表示x轴过渡值
取值y表示y轴过渡值 ----如果没有赋值,默认是0
默认以元素的中心点为基点,可以通过transform-origin进行基点的设置
x,y如果为负就反方向移动
Css代码
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/23/276a3b17019081ce24d65dc582df0c93.png)
translate(100px,200px);
2、translateX(<translation-value>) 通过给x方向上的指定参数值,实现x轴方向上的移动。
Css代码
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/23/276a3b17019081ce24d65dc582df0c93.png)
translateX(100px);
3、translateY(<translation-value>) 通过给y方向上的指定参数值,实现x轴方向上的移动。
Css代码
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/23/276a3b17019081ce24d65dc582df0c93.png)
translateY(200px);
相关文章推荐
- Css3之基础-3 Css 尺寸单位、尺寸属性与边框属性
- css常用选择器
- Html+CSS transform属性中的 rotate 属性值
- CSS总结(二)—— 浮动 与 清除浮动
- Css3之基础-2 Css 基础选择器
- Html+CSS CSS3 Keyframe+Animation属性 CSS动画
- CSS3 选择器 属性选择器介绍
- CSS3选择器
- CSS 预处理器与 CSS 后处理器
- CSS总结(一)—— display三种元素(区别、重点、扩展)
- 再谈 CSS 预处理器
- 格式化CSS文件,使之变成键值对形式
- 如何用css 将span 右对齐
- css3 flex的使用示例集合
- css优先级
- Html+CSS CSS3中 transitions属性详解
- Css3之基础-1 Css 概述、样式表使用方式、语法规范
- CSS中伪类和伪元素学习总结
- 十天学会web标准(DIV+CSS)系列(十)div+css网页标准布局实例教程
- HTML外部引用CSS文件不生效原因分析及解决办法