We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
这是学习《CSS 权威指南》第 16 章的笔记。
2D（二维）变形只需关注 x 轴和 y 轴。按约定，x 轴上的正值在右侧，负值在左侧。y 轴上的正值沿纵轴向下，负值沿纵轴向上。
如果想在三维空间中改变元素的形态，要加上 z 轴的值。
transform 属性的初始值是 none，适用于除“基元行内”框之外的所有元素。百分数相对范围框计算。
受 CSS 控制的元素，其范围框是边框框，即元素边框的外边界。也就是说，计算范围框时，轮廓和外边距不算在内。
经过缩放的元素可能比变形前小或大，不过元素在页面上所占的空间与变形前保持不变。这一点对所有的变形函数都成立。
#example { transform: rotate(30deg) skewX(-25deg) scaleY(2); }
变形通常不叠加。如果改变了元素的形态，而后想再添加一种变形，那么要在原变形的基础上修改。不过动画变形例外，不管使用过渡还是真正的动画，效果是叠加的。
有趣的是，即使不显式使用过渡或动画，也能通过用户交互伪类（例如 :hover）实现叠加的变形。这是因为悬停等效果就是一种过渡，只不过不是由过渡属性触发的。因此，可以像下面这样声明：
img#one { transform: translateX(100px) scale(1.2); } img#one:hover { transform: rotate(-45deg); }
变形不能应用到基元行内框上。基元行内框指 span、超链接等行内框。
一共有 21 个变形函数：
transform 属性的值通常是由空格分隔的一个或多个函数，各函数从头（左）至尾（右）依次处理，而且每个函数的值都必须是有效的。倘若有一个函数的值是无效的，那么 transform 属性的整个值都将失效，因而也就不做任何变形。
平移变形指沿一个轴或多个轴移动。translateX() 沿元素自身的 x 轴移动元素，translateY() 沿元素自身的 y 轴移动元素，translateZ() 沿元素自身的 z 轴移动元素。
translateX() 和 translateY() 两个函数的值都是一个距离值，可以是长度，也可以是百分数。值为百分数时，移动距离相对元素自身的尺寸计算。
translateZ() 这个函数沿 z 轴平移元素，即在第三个维度中移动元素。与 2D 平移函数不同，translateZ() 只接受长度值。translateZ() 不允许使用百分数值，其实任何有关 z 轴的值都不可以使用百分数。
如果想同时沿 x 轴和 y 轴移动，使用 translate() 更方便。第一个值是沿 x 轴的移动量，第二个值是沿 y 轴的移动量。如果省略 y 值，假定为零。因此，translate(2em) 视作 translate(2em, 0)，也等同于 translateX(2em)。
translate3d() 这个简写属性能同时设定 x 轴、y 轴和 z 轴的平移量。与 translate() 不同，如果 translate3d() 的值少于三个，没有假定的默认值。因此，用户代理应该把 translate3d(1em, -50px) 视作无效的，而不能假定为 translate3d(1em, -50px, 0)。
缩放变形把元素放大或缩小，具体取决于提供的值。缩放函数的值都是无单位的实数，而且始终为正数。在 2D 平面内，可以分别在 x 轴和 y 轴上缩放，也可以同时在两个轴上缩放。
提供给缩放函数的数字是个乘数，因此，scaleX(2) 将把元素的宽度变为变形前的两倍，而 scaleY(0.5) 将把元素的高度缩小一半。
如果想在两个轴上同时缩放，使用 scale()。第一个值始终是 x 值，第二个则是 y 值。如果只提供一个值，用作两个轴的缩放值。
scaleZ() 函数仅在 z 轴上缩放，而 scale3d() 则能同时在三个轴上缩放。当然，仅当元素有深度时，这两个函数才有效果，而元素在默认情况并没有深度。
旋转函数绕某个轴旋转元素，或者绕 3D 空间中的一个向量旋转元素。旋转变形有四个简单的函数，以及一个稍微复杂、专门用于 3D 旋转的函数。
rotate()、rotateX()、rotateY() 和 rotateZ() 四个简单的旋转函数都只接受一个值，即角度。角度值以一个数字（可正可负）和一个有效的角度单位（deg、grad、rad 和 turn）表示。
rotate() 函数实施的是 2D 旋转，效果等同于 rotateZ()，是我们最常用的旋转方式。类似地，rotateX() 绕 x 轴旋转，rotateY() 绕 y 轴旋转元素。
使用 rotate3d()，前三个值指定 3D 空间中向量的 x、y 和 z 分量，第四个值是角度值，指定绕向量旋转的量。
倾斜函数沿 x 轴和（或） y 轴倾斜元素。元素不能沿 z 轴或 3D 空间中的向量倾斜。
skew(a, b) 的效果与 skewX(a)skewY(b) 不同。如果提供两个值，第一个始终是 x 轴的倾斜角度，第二个是 y 轴的倾斜角度。如未指定 y 轴倾斜角度，假定为零。
skew() 倾斜元素
在 3D 空间中改变元素的形态时，基本上都要赋予元素一定的视域。视域为元素赋予前后深度，而这深度可以根据需要设定。
视域值必须是正数，而且不能为零。
如果想在变形函数列表中设定视域值，一定要把 perspective() 函数放在首位，至少也要放在依赖视域的变形之前。这一点特别重要，请牢记，transform 函数的编写顺序十分重要。
一般来说，最好使用后面即将提到的 perspective 属性，不过也有需要使用 perspective() 函数的例外情况。
matrix() 函数的有效值是六个以逗号分隔的数字，不能多也不能少。matrix() 函数的值所用的句法十分复杂，描述的是元素变形后的最终状态，可以涵盖其他所有变形类型（旋转、倾斜等）。
matrix3d() 函数的值是 16 个以逗号分隔的数字，不能多也不能少。
除了基本的 transform 属性之外，还有几个辅助属性，用于定义变形的原点、“场景”使用的视域等。
transform-origin 属性的值为两个或三个关键字，用于定义相对哪个点变形：第一个值针对横向，第二个值针对纵向，可选的第三个值是 z 轴上的长度。横轴和纵轴可以使用百分数、长度，或者 top 等关键字。z 轴只能使用长度值。初始值是 50% 50%，适用于任何可变形的元素。
长度值设定的是距元素左上角的距离，百分数相对对应的轴和元素的尺寸计算，设定的是距元素左上角的偏移量。
定义原点的不同方式
原点对缩放、旋转和倾斜三种变形类型有影响，对平移没有影响。
默认情况下，不管怎么变形，得到的结果都是扁平的。如果希望在 3D 空间中呈现元素，可以使用 transform-style 属性修改。
transform-style 属性有两个可选值：flat 和 preserve-3d。初始值是 flat，适用于任何可变形的元素。
视域其实由两个属性定义：一个定义视域距离，相当于前面讨论过的 perspective() 函数；另一个定义视域的原点。
（1）定义视域
perspective 属性的值是一个长度，定义视域锥体的深度。初始值是 none，适用于任何可变形的元素。
perspective: 2500px; perspective: 200px;
perspective() 函数只为目标元素定义视域，那么只有应用这个规则的元素才使用设定的视域。而 perspective 属性定义的视域深度应用到目标元素的所有子元素上。多数时候，应该使用 perspective 属性。
（2）移动视域的原点
视域有原点，也称消隐点，这个点的位置可以使用 perspective-origin 属性修改。这个属性的初始值是 50% 50%，适用于任何可变形的元素。
perspective: 850px; perspective-origin: 50% 0%;
倘若 perspective 属性的值是默认值 none，不管把 perspective-origin 设为什么，都将被忽略。毕竟，没有视域也就没有视域原点。
backface-visibility 属性的作用是决定元素的背面朝向我们时是否渲染背面。
这个属性的可选值有两个 visible 和 hidden。初始值是 visible，适用于任何可变形的元素。
Hello, transform.
The text was updated successfully, but these errors were encountered:
No branches or pull requests
变形
这是学习《CSS 权威指南》第 16 章的笔记。
坐标系
2D（二维）变形只需关注 x 轴和 y 轴。按约定，x 轴上的正值在右侧，负值在左侧。y 轴上的正值沿纵轴向下，负值沿纵轴向上。
如果想在三维空间中改变元素的形态，要加上 z 轴的值。
transform 属性
transform 属性的初始值是 none，适用于除“基元行内”框之外的所有元素。百分数相对范围框计算。
受 CSS 控制的元素，其范围框是边框框，即元素边框的外边界。也就是说，计算范围框时，轮廓和外边距不算在内。
经过缩放的元素可能比变形前小或大，不过元素在页面上所占的空间与变形前保持不变。这一点对所有的变形函数都成立。
变形通常不叠加。如果改变了元素的形态，而后想再添加一种变形，那么要在原变形的基础上修改。不过动画变形例外，不管使用过渡还是真正的动画，效果是叠加的。
有趣的是，即使不显式使用过渡或动画，也能通过用户交互伪类（例如 :hover）实现叠加的变形。这是因为悬停等效果就是一种过渡，只不过不是由过渡属性触发的。因此，可以像下面这样声明：
变形不能应用到基元行内框上。基元行内框指 span、超链接等行内框。
变形函数
一共有 21 个变形函数：
transform 属性的值通常是由空格分隔的一个或多个函数，各函数从头（左）至尾（右）依次处理，而且每个函数的值都必须是有效的。倘若有一个函数的值是无效的，那么 transform 属性的整个值都将失效，因而也就不做任何变形。
平移函数
平移变形指沿一个轴或多个轴移动。translateX() 沿元素自身的 x 轴移动元素，translateY() 沿元素自身的 y 轴移动元素，translateZ() 沿元素自身的 z 轴移动元素。
translateX() 和 translateY() 两个函数的值都是一个距离值，可以是长度，也可以是百分数。值为百分数时，移动距离相对元素自身的尺寸计算。
translateZ() 这个函数沿 z 轴平移元素，即在第三个维度中移动元素。与 2D 平移函数不同，translateZ() 只接受长度值。translateZ() 不允许使用百分数值，其实任何有关 z 轴的值都不可以使用百分数。
如果想同时沿 x 轴和 y 轴移动，使用 translate() 更方便。第一个值是沿 x 轴的移动量，第二个值是沿 y 轴的移动量。如果省略 y 值，假定为零。因此，translate(2em) 视作 translate(2em, 0)，也等同于 translateX(2em)。
translate3d() 这个简写属性能同时设定 x 轴、y 轴和 z 轴的平移量。与 translate() 不同，如果 translate3d() 的值少于三个，没有假定的默认值。因此，用户代理应该把 translate3d(1em, -50px) 视作无效的，而不能假定为 translate3d(1em, -50px, 0)。
缩放函数
缩放变形把元素放大或缩小，具体取决于提供的值。缩放函数的值都是无单位的实数，而且始终为正数。在 2D 平面内，可以分别在 x 轴和 y 轴上缩放，也可以同时在两个轴上缩放。
提供给缩放函数的数字是个乘数，因此，scaleX(2) 将把元素的宽度变为变形前的两倍，而 scaleY(0.5) 将把元素的高度缩小一半。
如果想在两个轴上同时缩放，使用 scale()。第一个值始终是 x 值，第二个则是 y 值。如果只提供一个值，用作两个轴的缩放值。
scaleZ() 函数仅在 z 轴上缩放，而 scale3d() 则能同时在三个轴上缩放。当然，仅当元素有深度时，这两个函数才有效果，而元素在默认情况并没有深度。
旋转函数
旋转函数绕某个轴旋转元素，或者绕 3D 空间中的一个向量旋转元素。旋转变形有四个简单的函数，以及一个稍微复杂、专门用于 3D 旋转的函数。
rotate()、rotateX()、rotateY() 和 rotateZ() 四个简单的旋转函数都只接受一个值，即角度。角度值以一个数字（可正可负）和一个有效的角度单位（deg、grad、rad 和 turn）表示。
rotate() 函数实施的是 2D 旋转，效果等同于 rotateZ()，是我们最常用的旋转方式。类似地，rotateX() 绕 x 轴旋转，rotateY() 绕 y 轴旋转元素。
使用 rotate3d()，前三个值指定 3D 空间中向量的 x、y 和 z 分量，第四个值是角度值，指定绕向量旋转的量。
倾斜函数
倾斜函数沿 x 轴和（或） y 轴倾斜元素。元素不能沿 z 轴或 3D 空间中的向量倾斜。
skew(a, b) 的效果与 skewX(a)skewY(b) 不同。如果提供两个值，第一个始终是 x 轴的倾斜角度，第二个是 y 轴的倾斜角度。如未指定 y 轴倾斜角度，假定为零。
skew() 倾斜元素
视域函数
在 3D 空间中改变元素的形态时，基本上都要赋予元素一定的视域。视域为元素赋予前后深度，而这深度可以根据需要设定。
视域值必须是正数，而且不能为零。
如果想在变形函数列表中设定视域值，一定要把 perspective() 函数放在首位，至少也要放在依赖视域的变形之前。这一点特别重要，请牢记，transform 函数的编写顺序十分重要。
一般来说，最好使用后面即将提到的 perspective 属性，不过也有需要使用 perspective() 函数的例外情况。
矩阵函数
matrix() 函数的有效值是六个以逗号分隔的数字，不能多也不能少。matrix() 函数的值所用的句法十分复杂，描述的是元素变形后的最终状态，可以涵盖其他所有变形类型（旋转、倾斜等）。
matrix3d() 函数的值是 16 个以逗号分隔的数字，不能多也不能少。
其他变形属性
除了基本的 transform 属性之外，还有几个辅助属性，用于定义变形的原点、“场景”使用的视域等。
transform-origin 属性
transform-origin 属性的值为两个或三个关键字，用于定义相对哪个点变形：第一个值针对横向，第二个值针对纵向，可选的第三个值是 z 轴上的长度。横轴和纵轴可以使用百分数、长度，或者 top 等关键字。z 轴只能使用长度值。初始值是 50% 50%，适用于任何可变形的元素。
长度值设定的是距元素左上角的距离，百分数相对对应的轴和元素的尺寸计算，设定的是距元素左上角的偏移量。
定义原点的不同方式
原点对缩放、旋转和倾斜三种变形类型有影响，对平移没有影响。
transform-style 属性
默认情况下，不管怎么变形，得到的结果都是扁平的。如果希望在 3D 空间中呈现元素，可以使用 transform-style 属性修改。
transform-style 属性有两个可选值：flat 和 preserve-3d。初始值是 flat，适用于任何可变形的元素。
perspective 和 perspective-origin 属性
视域其实由两个属性定义：一个定义视域距离，相当于前面讨论过的 perspective() 函数；另一个定义视域的原点。
（1）定义视域
perspective 属性的值是一个长度，定义视域锥体的深度。初始值是 none，适用于任何可变形的元素。
perspective() 函数只为目标元素定义视域，那么只有应用这个规则的元素才使用设定的视域。而 perspective 属性定义的视域深度应用到目标元素的所有子元素上。多数时候，应该使用 perspective 属性。
（2）移动视域的原点
视域有原点，也称消隐点，这个点的位置可以使用 perspective-origin 属性修改。这个属性的初始值是 50% 50%，适用于任何可变形的元素。
倘若 perspective 属性的值是默认值 none，不管把 perspective-origin 设为什么，都将被忽略。毕竟，没有视域也就没有视域原点。
backface-visibility 属性
backface-visibility 属性的作用是决定元素的背面朝向我们时是否渲染背面。
这个属性的可选值有两个 visible 和 hidden。初始值是 visible，适用于任何可变形的元素。
小结
Hello, transform.
The text was updated successfully, but these errors were encountered: