2D和3D变换

2D和3D变换

1. rotate(angle)方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

/值 rotate(30deg) 把元素顺时针旋转 30 度。/

transform: rotate(30deg);

2. translate(x,y)方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。

/值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。/

transform: translate(50px,100px);

3. scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。

/值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。/

transform: scale(2,4);

4. skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。

/值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。/

transform: skew(30deg,20deg);

5. matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

/如何使用 matrix 方法将 div 元素旋转 30 度：/

div

{

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

6. transform-origin 属性

允许你改变被转换元素的位置。

语法： transform-origin: x-axis y-axis z-axis;

属性值：

x-axis ：定义视图被置于 X 轴的何处。可能的值：left，center，right，length，%。

y-axis ：定义视图被置于 Y 轴的何处。可能的值：top，center，bottom，length，%。

z-axis ：定义视图被置于 Z 轴的何处。可能的值：length。

/设置旋转元素的基点位置/

transform: rotate(45deg);

transform-origin:20% 40%;

3D变换

1. perspective属性

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

语法： perspective: length|none;

属性值：

length ：元素距离视图的距离，以像素计。

none ：默认值。与 0 相同。不设置透视。

实例：

div

{

perspective: 500;

}

2. trasform-style属性

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

语法： transform-style: flat|preserve-3d;

属性值：

flat ：子元素将不保留其 3D 位置。

preserve-3d ：子元素将保留其 3D 位置。