原理

在CSS3中，可以使用translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。
对于位移translate()方法，我们分为3种情况：

ranslateX(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的百分比。

示例：元素在网页中居中

代码：

<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%;top: 50%;transform: translate(-50%,-50%);text-align: center;}</style></head><body><div>待居中元素</div></body>
</html>

效果：

css3 translate属性相关推荐

css中translation,css3 translate属性
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动):translateX(x)仅水平方向移动(X轴移动):translateY(Y)仅垂直方向移动(Y轴移动)默认都是从 ...
使用CSS3各个属性实现小人的动画
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...
两点补充——CSS3新属性以及弹性布局
CSS3 新属性一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋二 .[CSS 长度单位 ...
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样？
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样? <!DOCTYPE html> <html lang="en"> <head& ...
前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签标签名描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
html小人动画效果代码,使用CSS3各个属性实现小人的动画实例代码
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: 练习一个小人的动画 I ♥ Y O U ♫ ♪ CSS代码如下: ...
html页面添加动态动画小人,使用CSS3各个属性实现小人的动画_html/css_WEB-ITnose
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: 练习一个小人的动画 I ? Y O U ♫ ♪ CSS代码如下: ...
css3 固定,利用css3 translate完美实现表头固定效果
前言前段时间在工作中正好需要这个功能,但是找了很多都不能完美的实现,所以在此就自己做了一个固定表头的方法,主要用到了css3中的translate和一小段js代码,下面来一起看看吧. 效果如下: 感 ...
css让div旋转,CSS3 transform 属性旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...

css3 translate属性

原理

示例：元素在网页中居中

css3 translate属性相关推荐

最新文章

热门文章