Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

使用 CSS 变形

通过修改坐标,CSS transforms 可以在不影响正常文档流的情况下改变作用内容的位置。CSS transforms 包括一系列 CSS 属性,通过他们可以对 HTML 元素进行线性仿射变形。可以进行的变形包括旋转,倾斜,缩放以及位移,同时适用于平面以及三维空间。

CSS transforms 属性

有两个主要的属性被用来定义 CSS transforms:transformtransform-origin

transform-origin
指定原点的位置。默认值为元素的中心,可以被移动。很多变形需要用到这个属性,比如旋转,缩放和倾斜,他们都需要一个指定的点作为参数。 
transform
指定作用在元素上的变形。取值为空格分隔的一系列变形的列表,他们会像被组合操作请求一样被分别执行。

示例

示例:旋转

这个实例中展示了一个内容为 Google 首页的 iframe,它被依据左下角进行了 90 度的旋转。

查看在线示例 查看示例的屏幕截图

<div style="transform: rotate(90deg); transform-origin: bottom left;">
  <iframe src="https://www.baidu.com/" width="500" height="600"></iframe>
</div>

示例:倾斜和位移

这个实例中展示了一个内容为 Google 首页的 iframe,它被倾斜了 10 度并且在 X 轴方向上进行了 150 像素的偏移。

查看在线示例  查看示例屏幕截图

<div style="transform: skewx(10deg) translatex(150px);
            transform-origin: bottom left;">
  <iframe src="https://www.google.com/" width="600" height="500"></iframe>
</div>

3D 特有 CSS properties

在空间中实现 CSS 变形会稍微复杂一点。首先你必须设置一个透视点(perspective)来配置 3D 空间,然后定义你的 2D 元素在空间中的行为。

设置透视值

首先需要设置的是透视值(perspective). 透视值决定了 3D 实现的方式,元素与观察者之间的距离越远,他们就会越小。

元素缩小的速率由 perspective 属性决定。取值越小,透视越深。

perspective:0; perspective:250px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6
perspective:300px; perspective:350px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6

第二个需要设置的是通过 perspective-origin 属性设置观察者的位置。默认透视值为观察者的中心,但是这并不总是适当的。

perspective-origin:150px 150px; perspective-origin:50% 50%; perspective-origin:-50px -50px;
   
1
2
3
4
5
6
   
1
2
3
4
5
6
   
1
2
3
4
5
6

完成以上两点,你就可以在 3D 空间控制元素变形了。

参见

文档标签和贡献者

 此页面的贡献者: fscholz, troywith77, FredWe, ziyunfei, teoli, TimZhao, xcffl
 最后编辑者: fscholz,