css3 transform

transform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果。而在CSS3中transform主要有以下几种:位移 translate、缩放scale、旋转rotate、倾斜 ske、原点设置属性：transform-origin。
1、2D位移 translate()

说明：translate(tx)    当参数设置一个值的时候，代表水平方向的位移；
      translate(tx，ty)     第一个值代表水平方向的距离，第二个值    垂直方向的距离；
      translate(tx，ty,  tz)     第一个值代表水平方向的距离，第二个值    垂直方向的距离.第三个值   沿Z轴移动（3D）
      translateX(tx)    指定方向设置位移	   沿X轴移动		
      translateY(ty)    指定方向设置位移	   沿Y轴移动	 
      translateZ(tz)    指定方向设置位移	   沿Z轴移动   ( 3D)	 
	当属性值为正值时  代表的是向右或者向下移动，当为负值的时候  代表 向左或向上移动
说明：属性值可以用px   也可以用%（百分比大小的参照物是元素的宽高）
说明：translate（）位移的效果和定位里的relative的效果是类似的，都是在当前位置进行位移的，对其元素的布局是没有影响的，原来的位置的保留的。

2、2D缩放scale()

说明： 属性值代表的是倍数，是不用加单位； 0——1  之间是 缩小的效果， 大于1的时候都是放大效果；

     		默认值 是  1；
			scale( 值1 )             代表水平和垂直都放大或者缩小    
         	scale( 值1，值2 ) 值1：水平方向的缩放大小 值2  ：垂直方向
属性值可以设置为负值，但是很少用；
	 		scaleX（值）   水平方向的缩放比例
      		scaleY（值）   垂直方向的缩放比例
         	scaleZ（值）   Z轴方向的缩放比例     

3、2D旋转让rotate()

   说明:  属性值的单位是度（deg）

	rotate()        沿着中心点旋转；只能放一个属性值 ，正值：顺时针旋转；负值：逆时针旋转；
	rotateX()      沿X轴旋转
	rotateY() 	    沿Y轴旋转	
	rotateZ()      沿Z轴旋转    （3D）

4、2D倾斜 skew()

说明：属性值的单位是度（deg） ；属性值为正值：向左 或向上倾斜      负值：向右或向下倾斜

	skew( 值1 )	一个值的时候  代表 沿X轴倾斜

	skew( 值1，值2) 值1：  沿X轴的倾斜     值2 ：沿Y轴的倾斜

	skewX（）  沿X轴的倾斜   
	skewY（）  沿Y轴的倾斜	

5、原点设置属性：transform-origin

 定义：transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；

说明：transform-origin：值1    值2  ；    值1： 水平    值2：  垂直

	px      %       left   top   right  bottom ;

旋转案例

<div class="box">
			<img class="pic"  src="img/child.gif" alt="" />
			<img class="pic2" src="img/laoli.jpg" alt="" />
			<!--<p><img src="img/laoli.jpg" alt="" /></p>
			
</div>

			*{margin:0;padding:0;}
			.box{
				width:273px;
				height:332px;
				border:2px solid #f00;
				margin:50px auto;
				position: relative;
			}
			.box img{
				width:273px;
				height:332px;
				transition: 1s;				
			}
			.pic{
				transform: rotateY(180deg);
				
			}
			.box:hover .pic{
				transform: rotateY(360deg);
			}
			.pic2{				
				backface-visibility: hidden;
				position: absolute;
				top:0;left:0;
			}
			.box:hover .pic2{
				transform: rotateY(180deg);
			}

效果图