h5学习笔记之css2D变换与3D变换

一、2D变换
transform:
1、rotate() 旋转函数 (deg) 度数
rotateX() 绕X轴旋转，逆时针方向为正
rotateY() 绕Y轴旋转，顺时针方向为正
在3d模式中默认值为rotateZ();
如：

	div{
	margin:100px auto; 
	width:200px;height:200px;background:red;
	transition:2s;
	transform-origin:left;            //动画定位，旋转默认中心点为盒子中心，这里设置为左，就是盒子左边的中心点
	}
	div:hover{
		transform:rotate(360deg);   //设置动画，旋转360度
	}

2、 skew(X,Y) 倾斜函数 (deg)
skewX()
skewY()
如：

   div:hover{
		transform:skew(60deg,60deg);   //x轴y轴都倾斜60度，一个值的时候默认为 skewX()
	}

3、scale(X,Y) 缩放函数 (正数、负数和小数)
scaleX()
scaleY()
如：

	div:hover{
		transform:scale(0.5,1.5);  //x轴y轴缩放，一个值的时候默认为xy轴一样的这个值
	}

4、translate(X,Y) 位移函数(px)
translateX()
translateY()
如：

   div:hover{
		transform:translate(100px,100px);    //一个值的时候默认为x轴
	}

5、transform 简写执行顺序(后写先执行) （意思是执行多个变换时候，后面的变换先执行）
如：下面两个变换对比，第一个是正常的，先执行位置变换然后缩小

  .box1 div:hover{
		transform:scale(0.5) translate(100px,100px);
	}
	.box2 div:hover{
		transform:translate(50px,50px) scale(0.5);
	}

6、matrix(a,b,c,d,e,f) 矩阵函数
abcdef值分别为
a b c d e f
x轴缩放 y轴倾斜 x轴倾斜 y轴缩放 x轴位移 y轴位移

通过矩阵实现旋转
a=Math.cos(deg/180Math.PI);
b=Math.sin(deg/180Math.PI);
c=-Math.sin(deg/180Math.PI);
d=Math.cos(deg/180Math.PI);
只需要添加上要旋转的度数，然后算出abcd,放进函数里就可以实现旋转
变换兼容IE9以下IE版本只能通过矩阵来实现
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod=‘auto expand’);
IE下的矩阵没有E和F两个参数 M11a; M12c; M21b; M22d
如：

   div:hover{
		transform:matrix(0.87,0.5,-0.5,0.87,0,0);/*matrix(a,b,c,d,e,f)*/
	}
	

	

二、3D变换
1、如何实现盒子3D化
如代码：第一步先使用代码 transform-style:preserve-3d; 使现在的环境变成3d环境 ，然后要想看靠整个盒子变成正方体的形状，就需要在盒子的父元素添加代码 perspective:800px; 添加视镜 第三步，使平铺在平面上的6给面进行旋转，使得盒子包起来，变成正方体，这样可以得到一个3d立体模型，现在向要它绕着立体中心点旋转，而不是边旋转，就需要各边向Z方向前进100px 由于各边向前前进100px，为了保持盒子大小，所以添加第四步 transform:translate(-100px) rotateY(0deg); 这个旋转0度是因为下面也有一个旋转这个立体的 transform: translate(-100px)rotateY(360deg); 由于存在两天transform ,所以两条都要有共同的属性

 body{perspective:800px;}                           //第二步
 #box{
     width:200px;
	 height:200px;
	 margin:300px auto;
	 position:relative;
	 transform-style:preserve-3d;                   //第一步
	 transform:translate(-100px) rotateY(0deg);
	 transition:2s;
 }
 #box div{
     width:200px;
     height:200px;
     position:absolute;
	 border:2px solid red;
 }
 #box div:nth-child(1){
     left:0;
     top:-204px;
	 transform: translateZ(100px) rotateX(90deg);    //第三步，使平铺在平面上的6给面进行旋转，使得盒子包起来，变成正方体   现在向要它绕着立体中心点旋转，而不是边旋转，就需要各边向Z方向前进100px
	 transform-origin:bottom;
 }
 #box div:nth-child(2){
     left:0;
     top:204px;
	 transform: translateZ(100px) rotateX(-90deg);  //第三步，使平铺在平面上的6给面进行旋转，使得盒子包起来，变成正方体   现在向要它绕着立体中心点旋转，而不是边旋转，就需要各边向Z方向前进100px
	 transform-origin:top;
 }
 #box div:nth-child(3){
     left:-204px;
     top:0;
	 transform: translateZ(100px) rotateY(-90deg);  //第三步，使平铺在平面上的6给面进行旋转，使得盒子包起来，变成正方体  现在向要它绕着立体中心点旋转，而不是边旋转，就需要各边向Z方向前进100px
	 transform-origin:right;  

 }
 #box div:nth-child(4){
     left:204px;
     top:0;
	 transform: translateZ(100px) rotateY(90deg);   //第三步，使平铺在平面上的6给面进行旋转，使得盒子包起来，变成正方体  ..
	 transform-origin:left;

 }
 #box div:nth-child(5){
     left:0;
     top:0;
	 transform:translateZ(100px);  现在向要它绕着立体中心点旋转，而不是边旋转，就需要各边向Z方向前进100px
 }
 #box div:nth-child(6){
     left:0;
     top:0;
	 transform:translateZ(-100px);  现在向要它绕着立体中心点旋转，而不是边旋转，就需要各边向Z方向前进100px
 }
 #box:hover {
     transform: translate(-100px)rotateY(360deg);  
 }
  
 
 
 
上
下
左
右
前
后

注：3d移动和2d一样是translate