css3盒子变形(transform)

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

Transform 方法

语法： transform: none|transform-functions;

值	描述
none	定义不进行转换。
matrix(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)	定义 2D 转换，使用六个值的矩阵。
matrix3d(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(<em>x</em>,<em>y</em>)	定义 2D 转换。
translate3d(<em>x</em>,<em>y</em>,<em>z</em>)	定义 3D 转换。
translateX(<em>x</em>)	定义转换，只是用 X 轴的值。
translateY(<em>y</em>)	定义转换，只是用 Y 轴的值。
translateZ(<em>z</em>)	定义 3D 转换，只是用 Z 轴的值。
scale(<em>x</em>[,<em>y</em>]?)	定义 2D 缩放转换。
scale3d(<em>x</em>,<em>y</em>,<em>z</em>)	定义 3D 缩放转换。
scaleX(<em>x</em>)	通过设置 X 轴的值来定义缩放转换。
scaleY(<em>y</em>)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(<em>z</em>)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(<em>angle</em>)	定义 2D 旋转，在参数中规定角度。
rotate3d(<em>x</em>,<em>y</em>,<em>z</em>,<em>angle</em>)	定义 3D 旋转。
rotateX(<em>angle</em>)	定义沿着 X 轴的 3D 旋转。
rotateY(<em>angle</em>)	定义沿着 Y 轴的 3D 旋转。
rotateZ(<em>angle</em>)	定义沿着 Z 轴的 3D 旋转。
skew(<em>x-angle</em>,<em>y-angle</em>)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(<em>angle</em>)	定义沿着 X 轴的 2D 倾斜转换。
skewY(<em>angle</em>)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(<em>n</em>)	为 3D 转换元素定义透视视图。

css3-2D变形

通过使用 CSS transform 属性，您可以利用以下 2D 转换方法

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

1.translate(X,Y) 方法

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）

实例

div{ 
 /*值 translate(50px,100px) 把元素从左侧移动 50 像素，从*移动 100 像素。*/ 
 transform: translate(50px,100px); 
 -ms-transform: translate(50px,100px); /* IE 9 */ 
 -webkit-transform: translate(50px,100px); /* Safari and Chrome */ 
 -o-transform: translate(50px,100px); /* Opera */ 
 -moz-transform: translate(50px,100px); /* Firefox */ 
}

2. rotate() 方法

rotate() 方法根据给定的角度顺时针或逆时针旋转元素

实例

div{ 
 /*值 rotate(30deg) 把元素顺时针旋转 30 度。*/ 
 transform: rotate(30deg); 
 -ms-transform: rotate(30deg); /* IE 9 */ 
 -webkit-transform: rotate(30deg); /* Safari and Chrome */ 
 -o-transform: rotate(30deg); /* Opera */ 
 -moz-transform: rotate(30deg); /* Firefox */ 
}

3.scale() 方法

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）

实例

div{ 
 /*值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。*/ 
 transform: scale(2,4); 
 -ms-transform: scale(2,4); /* IE 9 */ 
 -webkit-transform: scale(2,4); /* Safari 和 Chrome */ 
 -o-transform: scale(2,4); /* Opera */ 
 -moz-transform: scale(2,4); /* Firefox */ 
}

4. scaleX() 方法

scaleX() 方法增加或减少元素的宽度

实例

div { 
 transform: scaleX(2); 
}

5. scaleY() 方法

scaleY() 方法增加或减少元素的高度

实例

div { 
 transform: scaleX(2); 
}

6. skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度

实例

div { 
 /* 元素沿X轴倾斜 20 度 */ 
 transform: skewX(20deg); 
}

7. skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度

实例

div { 
 /* 元素沿X轴倾斜 20 度 */ 
 transform: skewX(20deg); 
}

8. skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度

实例

div{ 
/*值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。*/ 
 transform: skew(30deg,20deg); 
 -ms-transform: skew(30deg,20deg); /* IE 9 */ 
 -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ 
 -o-transform: skew(30deg,20deg); /* Opera */ 
 -moz-transform: skew(30deg,20deg); /* Firefox */ 
}

matrix() 方法

matrix() 方法把所有 2D 变换方法组合为一个

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

/*使用 matrix 方法将 div 元素旋转 30 度：*/ 
div{ 
 transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
 -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ 
 -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ 
 -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ 
 -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ 
}

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

/*设置旋转元素的基点位置*/ 
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 和 Chrome */ 
 -webkit-transform-origin:20% 40%; /* Safari 和 Chrome */ 
 -moz-transform: rotate(45deg); /* Firefox */ 
 -moz-transform-origin:20% 40%; /* Firefox */ 
 -o-transform: rotate(45deg); /* Opera */ 
 -o-transform-origin:20% 40%; /* Opera */ 
}

CSS 3D 转换方法

通过 CSS transform 属性，您可以使用以下 3D 转换方法

• rotateX()
• rotateY()
• rotateZ()

1. rotateX() 方法

rotateX() 方法使元素绕其 X 轴旋转给定角度

实例

div{ 
 transform: rotateX(120deg); 
 -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */ 
 -moz-transform: rotateX(120deg); /* Firefox */ 
}

2.rotateY() 方法

rotateY() 方法使元素绕其 Y 轴旋转给定角度

实例

div{ 
 transform: rotateY(130deg); 
 -webkit-transform: rotateY(130deg); /* Safari 和 Chrome */ 
 -moz-transform: rotateY(130deg); /* Firefox */ 
}

rotateZ() 方法

rotateZ() 方法使元素绕其 Z 轴旋转给定角度

实例

div{ 
 transform:rotateZ(130deg); 
 -webkit-transform:rotateZ(130deg); /* Safari and Chrome */ 
 -moz-transform:rotateZ(130deg); /* Firefox */ 
}

perspective属性

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

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

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

语法： perspective: number|none;

属性值

• number ：元素距离视图的距离，以像素计
• none ：默认值。与 0 相同。不设置透视。

实例

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

trasform-style属性

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

注释：该属性必须与 transform 属性一同使用

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

属性值

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

实例

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