CSS 2D/3D 转换属性-KeepStudy

CSS 2D/3D 转换属性

| 属性 | 说明 | CSS |
|-----|-----|-----|
| transform | 适用于2D或3D转换的元素 | 3 |
| transform-origin | 允许您更改转化元素位置 | 3 |
| transform-style | 3D空间中的指定如何嵌套元素 | 3 |
| perspective | 指定3D元素是如何查看透视图 | 3 |
| perspective-origin | 指定3D元素底部位置 | 3 |
| backface-visibility | 定义一个元素是否应该是可见的，不对着屏幕时 | 3 |

## transform 属性
- Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
- 属性值
    - 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 转换元素定义透视视图。

```css
div{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
```

## transform-origin 属性
- transform-Origin属性允许您更改转换元素的位置。
- 2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
- 注意： 使用此属性必须先使用transform 属性。
- 属性值
    - x-axis：定义视图被置于 X 轴的何处。可能的值：left、center、right、length、%
    - y-axis：：定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、%
    - z-axis：定义视图被置于 Z 轴的何处。可能的值：length

```css
div{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}
```

## transform-style 属性
- transform--style属性指定嵌套元素是怎样在三维空间中呈现。
- 注意： 使用此属性必须先使用transform 属性.
- 属性值
    - flat：子元素将不保留其 3D 位置。
    - preserve-3d：子元素将保留其 3D 位置。

```css
div{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari and Chrome */
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
}
```

## perspective 属性
- 目前浏览器都不支持 perspective 属性。 Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
- perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
- 注释：perspective 属性只影响 3D 转换元素。
- 提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
- 属性值
    - number：元素距离视图的距离，以像素计。
    - none：默认值。与 0 相同。不设置透视。

```css
div{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}
```

## perspective-origin 属性
- perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
- 定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。
- 属性值
    - x-axis：定义视图被置于 X 轴的何处。可能的值：left、center、right、length、%
    - y-axis：定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、%

```css
div{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}
```

## backface-visibility 属性
- 属性值
    - visible：默认值。 背面是可见的。
    - hidden：背面是不可见的。

```css
div{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}
```

顶部

CSS属性

目录

相关推荐