CSS3【4】—2d/3d转换总结

最近抽了点时间，整理一下一些前端基础知识，写的不好的地方请大家踊跃留言，我会继续优化这一系列文章：

一、2d转换transform

默认转换的参考点 是当前当前元素的中心

transform-origin: x-axis y-axis z-axis; 默认值： 50% 50% 0

         x-axis	定义视图被置于 X 轴的何处。可能的值：left  center  right  length  %
         y-axis	定义视图被置于 y 轴的何处。可能的值：top  center  bottom  length  %
         z-axis	定义视图被置于 Z 轴的何处。可能的值：length

		width: 200px;
      	height: 200px;
      	background-color: red;
	
		transform: rotate(45deg);
		transform-origin:0 0 0  ;

1. 位移translate()

translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。

位移值：
       x  正值 右移    负值 左移
       y  正值 下移    负值 上移

	width: 200px;
    height: 200px;
    background-color: red;
    
    /*明确 x轴  y轴；以下二者选其一，同时移动x y 轴  只能用 translate(x,y)*/
	/* transform: translateX(-100px);*/
    /* transform: translateY(100px);*/
    
    /*当给定一个值得时候  表示x轴方向 平移*/
  	/*transform: translate(100px);   		  x */
    transform: translate(100px,100px);		/* x,y */

2.旋转rotate()

rotate(angle) 定义 2D 旋转，在参数中规定角度。

   旋转  单位 deg（角度，度数）,默认 旋转中心 为圆心
          正值 ：顺时针旋转
          负值 ：逆时针旋转

		width: 200px;
    	height: 200px;
    	background-color: red;
    	
		transform: rotate(30deg);
		/*transform: rotate(-30deg);*/

3.缩放scale()

scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。

        缩放
          值 <0  ： 放大 但是旋转180度   （执行过程  先）
          值=0   ：不可见
          1>值>0 : 缩小
          值=1   ：等比
          值>1   ：放大

 	 width: 200px;
     height: 200px;
     background-color: red;
    	
	 transform: scale(-2);   /*表示 x 和 y 同时*/
	 /*transform: scaleX(2);  表示 x */
	 /*transform: scaleY(0);   /*表示 y */

4.倾斜skew()

skew(x-angle,y-angle) ：定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) ： 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) ： 定义 2D 倾斜转换，沿着 Y 轴。

   /*transform: skewY(10deg);  定义 2D 倾斜转换，沿着 Y 轴 ,  夹角 是与x轴的夹角*/
   /*transform: skewX(10deg);  定义 2D 倾斜转换，沿着 x 轴 ,  夹角 是与y轴的夹角*/
   transform: skew(10deg,10deg);  /* 定义 2D 倾斜转换，沿着 X 和 Y 轴。*!*/
   /*transform: skew(10deg);    当只写一值 表示  沿着 x 轴 */

(这个图应该是3d的效果，绕着x轴和y轴转10°，平面图做不出来，所以画的有点问题)

二、3d转换

3d转换：基本同2d转换（没有倾斜），只是比2d转换多了一个Z轴

  旋转 ：表示旋转的方向
  	    值=0    表示不旋转
 		值>0    顺时针
  		值<0    逆时针

 transform: rotateX(90deg);
 transform: rotateY(90deg);
 transform: rotateZ(90deg);
 transform: rotate3d(1,0,0,90deg);

  /*添加一个定义3d的效果 放的是数值  100~900   数值越小3d效果越明显*/
     perspective: 100px;
  /*3d动画连写注意执行顺序*/
     transform: translateX(200px)  rotate3d(1,1,1,90deg) ;

3D转换特点：转换的元素会出现图层
脱离了文档流： 浮动 定位

1.位移translate

 	 /*位移*/
        transform: translateX(100px);
        transform: translateY(100px);

    z轴穿屏幕
       当是正值的时候表示：越来越近   近大
       当是负值的时候表示：越来越远   远小

	transform: translateZ(-100px);
	
	/*此时定义的是2d 的效果*/
	transform: translate();
	/*此时是3d 的效果*/
	transform: translate3d(100px,100px,-500px);

2.旋转rotate

  transform: rotateY(2);
  transform: rotateY(0.5);
  transform: rotateY(-2);
  transform: rotateX(-2);
  transform: rotateZ(0.5);
  transform: rotate3d(2,0.5,2);

3.缩放scale

同2d转换，多了一个z轴

  transform: scaleY(2);
  transform: scaleY(0.5);
  transform: scaleY(-2);
  transform: scaleX(-2);
  transform: scaleZ(0.5);
  transform: scale3d(2,0.5,2);