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 atedElement {
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坐标是从上边缘向下两倍于元素⾼度的地⽅。下⾯让元素围绕元素的左上⾓旋转45度：
1 2 3 4 5 6 7 atedElement {
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 atedElement {
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<!doctype html>
<html lang="en">
<head>
<title&</title>
<style>
.gallery {
margin:0px30px0px30px;
background: #D8EEFE;
padding: 10px;
}
.gallery img{
margin: 5px;
padding: 5px;
width: 75px;
border: solid1px black;
background: white;
transition: all1s;
-webkit-transition: all1s;
}
.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 >
<div class="gallery">
<img src="g1.jpg"/>
<img src="g2.jpg"/>
<img src="g3.jpg"/>
<img src="g4.jpg"/>
</div>
</body>
37</html>
