diff --git a/files/zh-cn/web/css/css_transforms/using_css_transforms/index.md b/files/zh-cn/web/css/css_transforms/using_css_transforms/index.md index 8adcae66d9731c..fade3b09912127 100644 --- a/files/zh-cn/web/css/css_transforms/using_css_transforms/index.md +++ b/files/zh-cn/web/css/css_transforms/using_css_transforms/index.md @@ -1,72 +1,538 @@ --- -title: 使用 CSS 变形 +title: 使用 CSS 变换 slug: Web/CSS/CSS_Transforms/Using_CSS_transforms --- {{CSSRef}} -通过改变坐标空间，**CSS transforms** 可以在不影响正常文档流的情况下改变作用内容的位置。这篇指南提供了有关使用 CSS 变形（CSS transforms）的介绍。 +通过改变坐标空间，**CSS 变换**（CSS transform）可以在不影响正常文档流的情况下改变作用内容的位置。这篇指南提供了有关使用 CSS 变换的介绍。 -CSS transforms 通过一系列 CSS 属性实现，通过使用这些属性，可以对 HTML 元素进行线性仿射变形（affine linear transformations）。可以进行的变形包括旋转，倾斜，缩放以及位移，这些变形同时适用于平面与三维空间。 +CSS 变换通过一系列 CSS 属性实现，通过使用这些属性，可以对 HTML 元素进行线性仿射变换（affine linear transformation）。可以进行的变换包括旋转、倾斜、缩放以及位移，这些变换同时适用于平面与三维空间。 -> **警告：** 只有使用[盒模型](/zh-CN/docs/Web/CSS/CSS_Box_Model)（Box Model）来定位的元素可以*被变换*（`transform`ed）。根据一般经验（原文：As a rule of thumb），拥有 `display: block` 的元素是由盒模型定位的。 +> **警告：** 只有使用[盒模型](/zh-CN/docs/Web/CSS/CSS_Box_Model)（Box Model）来定位的元素可以*被变换*（`transform`ed）。拥有 `display: block` 的元素是由盒模型定位的。 -## CSS transforms 属性 +## CSS 变换属性 -有两个主要的属性被用来定义 CSS transforms：{{cssxref("transform")}} 和 {{cssxref("transform-origin")}} +有两个主要的属性被用来定义 CSS 变换：{{cssxref("transform")}}（或单独的 {{cssxref('translate')}}、{{cssxref('rotate')}} 以及 {{cssxref('scale')}} 属性）和 {{cssxref("transform-origin")}}。 - {{cssxref("transform-origin")}} - - : 指定原点的位置。默认值为元素的中心，可以被移动。很多变形需要用到这个属性，比如旋转，缩放和倾斜，他们都需要一个指定的点作为参数。 + - : 指定原点的位置。默认值为元素的中心，可以被移动。很多变换需要用到这个属性，比如旋转、缩放和倾斜，它们都需要一个指定的点作为参数。 - {{cssxref("transform")}} - - : 指定作用在元素上的变形。取值为空格分隔的一系列变形的列表，他们会像被组合操作请求一样被分别执行。 + - : 指定作用在元素上的变换。取值为空格分隔的一系列变换的列表，它们会像被组合操作请求一样被分别执行。复合变换按从右到左的顺序高效地应用。 ## 示例 这是一个未经任何变换的 MDN 标志： -![MDN Logo](screen_shot_2016-02-16_at_15.53.54.png) +![MDN Logo](logo.png) ### 旋转 -这是一个在 iframe 中的 MDN 的标志，从左下角开始，旋转了 90 度。 +这是从左下角开始旋转 90 度后的 MDN 徽标。 ```html - +MDN Logo ``` -{{EmbedLiveSample('Rotating', 'auto', 240) }} +{{EmbedLiveSample('旋转', 'auto', 240) }} ### 倾斜与位移 还是 MDN 的标志，倾斜了 10 度，并从 X 轴位移了 150 个像素。 ```html - + src="logo.png" + alt="MDN logo" /> ``` -{{EmbedLiveSample('Skewing_and_translating') }} +{{EmbedLiveSample('倾斜与位移') }} ## 适用于三维的属性 -在三维空间中使用 CSS 变形会稍微复杂一点。你必须先设置一个透视点（perspective）以便配置 3D 空间，再去定义 2D 元素在空间中的行为。 +在三维空间中使用 CSS 变换会稍微复杂一点。你必须先设置一个透视点（perspective）以便配置 3D 空间，再去定义 2D 元素在空间中的行为。 ### 透视 -首先需要设置的属性是透视值（{{cssxref("perspective")}}）。透视正是三维空间的立体感的源泉。元素与观察者之间的距离越远，他们就越小。 +首先需要设置的属性是透视值（{{cssxref("perspective")}}）。透视正是三维空间的立体感的源泉。元素与观察者之间的距离越远，它们就越小。 + +#### 设定 perspective + +该实例展示了一个以不同的位置进行透视的立方体。立方体收缩的的速度由 {{ cssxref("perspective") }} 属性定义。其值越小，视角越深。 + +##### HTML + +下面的 HTML 创建了同一个框的四个副本，设定不同的透视值。 + +```html + + + + + + + + + + + + + + + + + + + +
perspective: 250px;perspective: 350px;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+ 		+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
perspective: 500px;perspective: 650px;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+ 		+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+``` + +##### CSS + +CSS 设定了可用于将透视值设定为不同距离的类。它还包括容器和与立方体本身（以及它的每一个面）的类。 + +```css +/* Shorthand classes for different perspective values */ +.pers250 { + perspective: 250px; +} + +.pers350 { + perspective: 350px; +} + +.pers500 { + perspective: 500px; +} + +.pers650 { + perspective: 650px; +} + +/* Define the container div, the cube div, and a generic face */ +.container { + width: 200px; + height: 200px; + margin: 75px 0 0 75px; + border: none; +} + +.cube { + width: 100%; + height: 100%; + backface-visibility: visible; + perspective-origin: 150% 150%; + transform-style: preserve-3d; +} + +.face { + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; +} + +/* Define each face based on direction */ +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); +} + +.back { + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); +} + +/* Make the table a little nicer */ +th, +p, +td { + background-color: #eeeeee; + padding: 10px; + font-family: sans-serif; + text-align: left; +} +``` + +##### 结果 -{{page("/en-US/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}} +{{EmbedLiveSample('设定 perspective', 660, 700)}} + +要配置的第二个元素是观察者（viewer）的位置，带有 {{ cssxref("perspective-origin") }} 属性。默认情况下，视角以观察者为中心，但这并不总是足够的。 + +#### 改变透视原点 + +该实例展示了带有流行的 `perspective-origin` 值的立方体。 + +##### HTML + +```html +
+
+
perspective-origin: top left;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: top;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: top right;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: left;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: 50% 50%;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: right;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: bottom left;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: bottom;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: bottom right;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: -200% -200%;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: 200% 200%;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+ +
+
perspective-origin: 200% -200%;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+
+``` + +##### CSS + +```css +/* perspective-origin values (unique per example) */ +.potl { + perspective-origin: top left; +} +.potm { + perspective-origin: top; +} +.potr { + perspective-origin: top right; +} +.poml { + perspective-origin: left; +} +.pomm { + perspective-origin: 50% 50%; +} +.pomr { + perspective-origin: right; +} +.pobl { + perspective-origin: bottom left; +} +.pobm { + perspective-origin: bottom; +} +.pobr { + perspective-origin: bottom right; +} +.po200200neg { + perspective-origin: -200% -200%; +} +.po200200pos { + perspective-origin: 200% 200%; +} +.po200200 { + perspective-origin: 200% -200%; +} + +/* Define the container div, the cube div, and a generic face */ +.container { + width: 100px; + height: 100px; + margin: 24px; + border: none; +} + +.cube { + width: 100%; + height: 100%; + backface-visibility: visible; + perspective: 300px; + transform-style: preserve-3d; +} + +.face { + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; +} + +/* Define each face based on direction */ +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); +} +.back { + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); +} +.right { + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); +} +.left { + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); +} +.top { + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); +} +.bottom { + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); +} + +/* Make the layout a little nicer */ +section { + background-color: #eee; + padding: 10px; + font-family: sans-serif; + text-align: left; + display: grid; + grid-template-columns: repeat(3, 1fr); +} +``` -第二个需要设置的是观察者的位置，可通过 {{cssxref("perspective-origin")}} 属性来设置。默认透视值中，为观察者被置于中心，但是这并不总是适当的。 +##### Result -{{page("/en-US/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}} +{{EmbedLiveSample('改变透视原点', '100%', 700)}} -完成这些之后，你就可以折腾被置于三维空间之中的元素了。 +完成此操作后，你可以在 3D 空间中处理元素。 ## 参见 -- [Using deviceorientation with 3D Transforms](/zh-CN/docs/DOM/Using_device_orientation_with_3D_transforms) -- [Intro to CSS 3D transforms](http://desandro.github.com/3dtransforms/)（由 David DeSandro 撰写的博客） +- [CSS `transform` 属性](/zh-CN/docs/Web/CSS/transform)和 [CSS `` 数据类型](/zh-CN/docs/Web/CSS/transform-function) +- 单独的变换属性：{{cssxref('translate')}}、{{cssxref('rotate')}} 和 {{cssxref('scale')}}（没有 `skew` 属性） +- [将设备方向与 3D 变换结合使用](/zh-CN/docs/Web/API/Device_orientation_events/Using_device_orientation_with_3D_transforms) +- [CSS 3D 变换简介](https://3dtransforms.desandro.com/)（由 David DeSandro 撰写的博客） +- [CSS 变换 Playground](https://css-transform.moro.es/)（CSS 变换函数可视化的在线工具） diff --git a/files/zh-cn/web/css/css_transforms/using_css_transforms/screen_shot_2016-02-16_at_15.53.54.png b/files/zh-cn/web/css/css_transforms/using_css_transforms/screen_shot_2016-02-16_at_15.53.54.png deleted file mode 100644 index 13da432059deab..00000000000000 Binary files a/files/zh-cn/web/css/css_transforms/using_css_transforms/screen_shot_2016-02-16_at_15.53.54.png and /dev/null differ