css 平移到某个位置_CSS3 对象平移translate()translatex()translatey()应用实例，包括水平垂直居中...

CSS3新增了制作动画功能，既然是动画就少不了移动，因此平移属性translate随之增加。translate主要用于控制对象的移动，它又可分为translatex()和translatey()，前者控制对象沿X轴移动，后者控制对象沿Y轴移动，translate既可控制对象沿X轴移动又可控制对象沿Y轴移动，当然也能控件对象同时沿X和Y移动。

translate相对来说是transform中比较简单的属性，最多设置两个值，比较容易理解，有CSS基础，看一个实例基本上就懂了。以下先简单介绍一下translatex()、translatey()和translate()的语法规则，然后分别举一个应用实例。

一、对象平移语法规则

1、translatex语法规则

translatex()

translatex设置对象沿X轴平移，表达式中的translation-value，是对象沿X轴方向平移的数值，如 100px。

2、translatey语法规则

translatey()

translatey设置对象沿Y轴平移，表达式中的translation-value，是对象沿Y轴方向平移的数值，如 100px。

3、translate语法规则

translate([, ? ])

表达式中第一个translation-value，是对象沿X轴方向平移的数值，不能省略；第二个translation-value，是对象沿Y轴方向平移的数值，可以省略。

二、translatex()、translatey()和translate()应用实例

1、translatex()应用实例

html代码：

transform:translatex(100px);

CSS样式：

.translatex{transform:translatex(100px);border:1px solid #ab9595;width:300px;height:100px;background-color:#e3e2e0; padding:8px;}

效果图：

transform:translatex(100px);

从效果图中可以看出，div沿X轴方向(右边)平移了100像素。

2、translatey()应用实例

html代码：

transform:translatey(100px);

CSS样式：

.translatey{transform:translatey(100px);border:1px solid #ab9595;width:300px;height:100px;background-color:#e3e2e0; padding:8px;}

效果图：

transform:translatey(100px);

div沿Y轴方向(向下)平移了100像素。

3、translate()应用实例

html代码：

transform:translate(100px, 100px);

CSS样式：

.translate{transform:translate(100px, 100px);border:1px solid #ab9595;width:300px;height:100px;background-color:#e3e2e0; padding:8px;}

效果图：

transform:translate(100px, 100px);

div沿X轴和Y轴方向都平移了100像素。

4、Css translate 居中

html代码(圆角矩形居中)：

Css translate

.box{border:1px solid #ab9595;width:300px;height:100px;background-color:#e3e2e0; padding:8px;}

.translateCenter {

position:absolute;

top:50%;

right:50%;

border-radius:4px;

-webkit-transform:translate(50%, -50%); /* webkit内核浏览器(Chrome/谷歌 和 Safari/苹果)*/

-ms-transform:translate(50%, -50%); /* ie(edge)内核浏览器 */

-moz-transform:translate(50%, -50%); /* firefox(火狐)内核浏览器 */

-o-transform:translate(50%, -50%); /* Opera 内核浏览器 */

transform:translate(50%, -50%); /* W3C标准浏览器 */

}

translate

效果图：

如果把 right:50% 改为 left:50%，transform:translate(50%, -50%) 要改为 transform:translate(-50%, -50%)；因为对于 translate 来说，正数表示右边，负数表示左边。对于 top 和 bottom 来说，正数表示上，负数表示下。

Css translate 文字垂直居中

只需在上面的基础上再定义一个文字垂直居中 CSS，即：

.center {

display:flex;

justify-content:center; /* 水平居中 */

align-items:center; /* 垂直居中 */

}

再引用该 CSS，即：

translate

效果图：