transform实例
transform
1，定义：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
2，浏览器支持：
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
3，值以及值的定义：
| 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 转换元素定义透视视图。 |
4，实例：
1，变换函数
translateX(x)：在水平方向移动元素，正值向右移动。
translateY(y)：在垂直方向移动元素，正值向下移动。
translate(x,y)：在水平和垂直方向移动元素。
scaleX(x)：在水平方向缩放元素（1.0是原始大小）。使用负值会将元素绕y轴翻转，创建一个从右到左的镜像。
scaleY(y)：在垂直方向缩放元素（1.0是原始大小）。使用负值会将元素绕x轴翻转，创建一个从下到上的镜像。
scale(x,y)：在水平和垂直方向缩放元素。
rotate(angle)：围绕元素中心顺时针旋转。用负值则逆时针旋转。
skewX(angle)：在水平方向倾斜元素。上下边缘仍然水平，左右边缘倾斜。
skewY(angle)：在垂直方向倾斜元素。左右边缘不倾斜，上下边缘倾斜。
skew(x-angle,y-angle)：在水平和垂直方向倾斜。
matrix(n1,n2,n3,n4,n5,n6)：用矩阵乘法来变换元素（其他所有的变换都可以使用矩阵乘法来实现）。
2，变换
变换是一个强大的工具，可以移动、缩放、斜切和旋转元素，扭曲它的外观。要用 transform 属性即可实现变换。
（变换不会影响页面中的其他元素，也不会影响布局。比如通过变换放大某个元素，那么该元素会简单地覆盖相邻元素）
以如下图片为例：
（1）旋转元素及其内容
下面使用rotate()函数把元素围绕其中心点旋转了20度。
|
1
2
3
4
5
6
7
8
9
|
<style>.rotatedElement { transform: rotate(20deg); -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg);}</style><img src="logo5.png" class="rotatedElement"/> |
（2）连续使用多种变换效果
下面先把元素变成原来的1.2倍，再向右移动30个像素，然后又斜切了-15度。
|
1
2
3
4
5
|
.rotatedElement { transform: scale(1.2) translateX(30px) skew(-15deg); -ms-transform: scale(1.2) translateX(30px) skew(-15deg); -webkit-transform: scale(1.2) translateX(30px) skew(-15deg);} |
（3）修改默认参照点。
一般变换是以元素的中心点为参照点的。可以通过在应用变换前用 transform-origin 属性来移动这个参照点。
比如：
transform-origin: 0% 0%; 表示左上角为参照点
transform-origin: 100% 0%; 表示右上角为参照点
transform-origin: 50% 200%; 表示参照点x坐标是元素水平方向的中间，y坐标是从上边缘向下两倍于元素高度的地方。
transform-origin: 100% 0%; 表示右上角为参照点
transform-origin: 50% 200%; 表示参照点x坐标是元素水平方向的中间，y坐标是从上边缘向下两倍于元素高度的地方。
下面让元素围绕元素的左上角旋转45度：
|
1
2
3
4
5
6
7
8
9
|
.rotatedElement { transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);} |
（4）移除所有的变换效果
要移除所有的变换效果，可将 transform 属性设置为 none
|
1
2
3
4
5
|
.rotatedElement { transform: none; -ms-transform: none; -webkit-transform: none;} |
3，3D变换
除了在二维空间移动元素，CSS3还可以用3D变换在三维空间移动、旋转和弯曲元素。
4，使用变换的过渡
通常变换和过渡是组合使用的。比如下面以一个在线影集为例，当鼠标移动到图片上时，图片会旋转并放大。而鼠标离开时，图片又会收缩并回到原位。这些变换是有过渡效果的。
在线演示如下：
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!doctype html><html lang="en"> <head> <title>hangge.com</title> <style> .gallery { margin:0px 30px 0px 30px; background: #D8EEFE; padding: 10px; } .gallery img{ margin: 5px; padding: 5px; width: 75px; border: solid 1px black; background: white; transition: all 1s; -webkit-transition: all 1s; } .gallery img:hover { transform: scale(2.2) rotate(10deg); -ms-transform: scale(2.2) rotate(10deg); -webkit-transform: scale(2.2) rotate(10deg); } </style></head><body style="padding-top:100px"> <div class="gallery"> <img src="g1.jpg"/> <img src="g2.jpg"/> <img src="g3.jpg"/> <img src="g4.jpg"/> </div></body></html> |
