65.9K
CodeProject 正在变化。 阅读更多。
Home

理解 CSS3 转换方法

Arpit Jain
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.73/5 (12投票s)

2014年2月13日

CPOL

4分钟阅读

viewsIcon

12865

在这里，我们将学习 CSS3 的 translate 方法

引言

在本文中，我们将学习 CSS3 的 translate 方法。它是 CSS3 2D 和 3D 转换的一部分。此方法有五个变体，其中三个方法用于 2D 转换，另外两个方法用于 3D 转换。我们将学习以下五个 translate 方法的变体：

  1. 沿 X 轴平移 – translateX(K)
  2. 沿 Y 轴平移 – translateY(K)
  3. 沿 X/Y 轴平移 – translate(K1,K2)
  4. 沿 Z 轴平移 – translateZ(K)
  5. 沿 X/Y/Z 轴平移 – translate3d(K1,K2,K3)

让我们从 translate 方法的第一个变体开始讨论。

沿 X 轴平移 – translateX(K)

平移表示将元素移动一定距离。设该距离为 K。当元素沿 X 轴移动时，称为沿 X 轴平移。它类似于绝对定位，但左偏移量等于 K。 K 是以像素为单位的任何数字，它可以从负整数变化到正整数。

示例 1

<div id=“box-X”></div>

CSS

#box-X{
  width:100px;
  height:100px;
  border:1px solid black;
  position:absolute;
  top:40px;
  left:40px;
  -webkit-transition:all 0.5s;
}
#box-X:hover{
  -webkit-transform:translateX(200px);
}

在运行上面的示例时，我们将看到框沿 X 轴从原点 (0,0) 平移到 (200,0)，即沿 X 轴平移 200px。 同样可以通过将 left 属性设置为 200px 来实现。 上面代码的输出如下：

沿 Y 轴平移 – translateY(K)

此方法变体用于沿 Y 轴平移元素。 元素的 X 坐标保持不变，但 Y 坐标变化量等于 K，其中 K 是任何整数。

示例 2

<div id=“box-X”></div>

CSS

#box-X{
  width:100px;
  height:100px;
  border:1px solid black;
  position:absolute;
  top:40px;
  left:40px;
  -webkit-transition:all 0.5s;
}
#box-X:hover{
  -webkit-transform:translateY(200px);
}

在执行上面的代码后，我们将看到框沿 Y 轴平移。 框将从 (0,0) 平移到 (0,200)，即沿 Y 轴平移 200px。 通过将“top”属性设置为 200px，可以实现相同的效果。

沿 X/Y 轴平移 – translate(K1,K2)

此方法变体允许我们在 X-Y 平面上平移任何元素。 每个 X、Y 坐标可以彼此独立地平移，平移量分别为 K1 和 K2。

示例 3

CSS

#box-X{
  width:100px;
  height:100px;
  border:2px solid red;
  position:absolute;
  top:40px;
  left:40px;
  -webkit-transition:all 0.5s;
}
#box-X:hover{
  -webkit-transform:translate(200px,200px);
}

在执行上面的代码后，该元素将在 X-Y 平面上平移，沿 X 轴平移 200px，沿 Y 轴平移 200px。 这与将元素从 (0,0) 平移到 (200,200) 相同。 通过设置“left”和“top”属性都可以实现相同的效果。

沿 Z 轴平移 – translateZ(K)

此平移变体主要用于 3D 转换。 它使元素沿 Z 轴平移，平移量等于 K。为了使此效果可见，我们需要启用 CSS3 的 3D 设置。 这可以通过将“transform-style”设置为“preserve-3d”和透视距离来完成。

示例 4

CSS

body{
  -webkit-perspective:1000px;
}
#box-X{
  width:100px;
  height:100px;
  border:2px solid red;
  position:absolute;
  top:40px;
  left:80px;
  -webkit-transform-style:preserve-3d;
  -webkit-transition:all 0.5s;
}
#box-X:hover{
  -webkit-transform:translateZ(100px);
}

在执行上述代码后，我们将看到一个元素朝用户抬起。 这是因为该元素沿 Z 轴平移。元素在 Z 轴上的平移导致用户眼睛和元素之间的距离减小，而距离的这种减小导致该元素看起来比原来更大。 在上面的代码中，元素中心从 (0,0,0) 转移到 (0,0,50)。 这种效果无法通过使用绝对定位设置来实现。

沿 X/Y/Z 轴平移 – translate3d(K1,K2,K3)

这种平移变体也来自 3D 转换。 通过使用此方法，用户可以分别沿 X 轴、Y 轴和 Z 轴在 X-Y-Z 平面上平移元素，平移量分别等于 K1、K2 和 K3。 此效果要求您像我们在上一种方法中所做的那样在网页上启用 3D 效果。

示例 5

HTML

  <div id=“camera”>
  <div id=“stub1?></div>
  <div id=“box-X”></div>
  </div>

CSS

#camera{
  -webkit-perspective:1000px;
}
#box-X{
  -webkit-transform-style:preserve-3d;
  width:100px;
  height:100px;
  border:2px solid red;
  position:absolute;
  top:40px;
  left:40px;
  background-color:rgba(50,50,50,0.5);
  -webkit-transition:all 0.5s;
 -webkit-transform:rotateX(85deg);
}
 
#stub1{
  position:absolute;
  top:40px;
  left:40px;
  width:200px;
  height:200px;
  border:1px solid black;
  background-color:rgba(50,50,50,0.5);
 -webkit-transform:rotateX(85deg);
}
#box-X:hover{
  -webkit-transform:rotateX(85deg)   translate3d(100px,50px,-50px);
}

在执行上面的代码后，box-x 坐标将从 (0,0,50) 平移到 (100,50,0)。 这种效果无法使用绝对定位或任何其他设置来实现。

演示列表

摘要

这就是本文的全部内容。 我希望您喜欢阅读这篇文章，并发现它很有用。 如果有任何疑问，请随时在评论区提问。

注意：上面的代码仅适用于 Chrome 浏览器。 由于 CSS3 是新的，并且其所有功能尚未实现，因此如果在不同的浏览器上测试代码，则需要使用特定于浏览器的前缀。 一些前缀代码如下：

  • Chrome -webkit-
  • Internet Explorer -ie-
  • Firefox 浏览器 -moz-

归档于：CodeProject, CSS

© . All rights reserved.