本篇讲解CSS的变形如何实现。
transform
向元素应用 2D
或 3D
转换。
该属性允许我们对元素进行旋转、缩放、移动或倾斜。
div{
transform: none|transform-functions;
}
transform 值 | 作用 | 测试 |
---|---|---|
none | 定义不进行转换。 | 测试 |
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 | 测试 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 | |
translate(x,y) | 定义 2D 转换。 | 测试 |
translate3d(x,y,z) | 定义 3D 转换。 | |
translateX(x) | 定义转换,只是用 X 轴的值。 | 测试 |
translateY(y) | 定义转换,只是用 Y 轴的值。 | 测试 |
translateZ(z) | 定义 3D 转换,只是用 Z 轴的值。 | |
scale(x,y) | 定义 2D 缩放转换。 | 测试 |
scale3d(x,y,z) | 定义 3D 缩放转换。 | |
scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 | 测试 |
scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 | 测试 |
scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 | |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 | 测试 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 | |
rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 | 测试 |
rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 | 测试 |
rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 | 测试 |
skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 | 测试 |
skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 | 测试 |
skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 | 测试 |
perspective(n) | 为 3D 转换元素定义透视视图。 |
transform-origin
transform-origin 属性允许您改变被转换元素的位置
。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
该属性必须与 transform 属性一同使用。
div
{
transform: rotate(45deg);
transform-origin:20% 40%;
}
语法:
transform-origin: x-axis y-axis z-axis;
x-axis
定义视图被置于 X 轴
的何处。可能的值:
- left
- center
- right
- length(px值)
- %(百分比)
y-axis
定义视图被置于 Y 轴
的何处。可能的值:
- top
- center
- bottom
- length(px值)
- %(百分比)
z-axis
定义视图被置于 Z 轴
的何处。可能的值:
- length(px值)
transform-style
规定如何在 3D 空间
中呈现被嵌套的元素。
该属性必须与 transform 属性一同使用。
div{
transform-style: flat|preserve-3d;
}
transform-style 值 | 作用 |
---|---|
flat | 子元素将不保留其 3D 位置。 |
preserve-3d | 子元素将保留其 3D 位置。 |
3D 转换
通过 transform 属性,您可以使用以下 3D 转换方法:
- rotateX()
- rotateY()
- rotateZ()
rotateX()
方法使元素绕其 X 轴旋转给定角度:
试一试
#myDiv {
transform: rotateX(150deg);
}
rotateY()
方法使元素绕其 Y 轴旋转给定角度:
试一试
#myDiv {
transform: rotateY(130deg);
}
rotateZ()
方法使元素绕其 Z 轴旋转给定角度:
试一试
#myDiv {
transform: rotateZ(90deg);
}
CSS 3D 转换方法
3D 变换属性 | 作用 |
---|---|
transform | 向元素应用 2D 或 3D 转换。 |
transform-origin | 允许你改变被转换元素的位置。 |
transform-style | 规定被嵌套元素如何在 3D 空间中显示。 |
perspective | 规定 3D 元素的透视效果。 |
perspective-origin | 规定 3D 元素的底部位置。 |
backface-visibility | 定义元素在不面对屏幕时是否可见。 |
暂无评论