亮术网
程序开发 > 网站前端设计 > CSS3 > 正文

CSS3 对象平移translate()translatex()translatey()应用实例，包括水平垂直居中

亮术网 2020-04-10 本网原创

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

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

 

一、对象平移语法规则

1、translatex语法规则

translatex(<translation-value>)

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

 

2、translatey语法规则

translatey(<translation-value>)

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

 

3、translate语法规则

translate(<translation-value>[,<translation-value> ? ])

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

 

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

1、translatex()应用实例

html代码：

<div class="translatex">transform:translatex(100px);</div>

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代码：

<div class="translatey">transform:translatey(100px);</div>

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代码：

<div class="translate">transform:translate(100px, 100px);</div>

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代码（圆角矩形居中）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Css translate</title>
  <style type="text/css">
    .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标准浏览器 */
    }
  </style>
</head>
<body>
  <div class="box translateCenter">translate</div>
</body>

效果图：

Css transform 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，即：

<div class="box translateCenter center">translate</div>

Css transform translate 文字垂直居中

效果图：

本文浓缩标签：translatetransformCSS3
提问或评注