CSS3-2D

一.兼容性问题：

div 
{ 
	transform: translate(50px,100px); 
	-ms-transform: translate(50px,100px); /* IE 9 */ 
	-webkit-transform: translate(50px,100px); /* Safari and Chrome */ 
}  

二.涉及到的代码

2.1设置margin居中

这里的img是行内元素而块级元素才可以设置margin居中

img{
	display: block;  /*转成块级元素*/
	margin: 100px auto;  /*块级元素才可以使用，img是行内元素，要转换成块级元素才能使用*/
		}

2.2 画圆角

border-radius:50%;
/*border-radius: 300px 0 0 0; */ /*圆角:左上、右上、右下、左下*/

2.3 过渡

div{
	transition:all 0.5s;  
	谁要过渡就给谁设置  会放慢平移，翻转，缩放速度
}

2.4 溢出隐藏

overflow: hidden;  /*溢出盒子的部分隐藏起来*/
/*给父元素设置，元素在父元素中溢出就隐藏*/

2.5 position：relative/absolute

/*父元素*/
div{
	position: relative;
}

	/*子元素*/
	img{
			position: absolute;
			top: 50%;
			left: 50%;   /*以父级div宽度为准*/
		}

2.5 z-index 与 backface-visibility

div img:first-child{

			z-index: 1;  /*堆叠顺序，设置第一个img显示出来*/
			backface-visibility: hidden;
			/*不是正面对向屏幕就隐藏*/
		}

三. 函数

3.1平移

transform:translateX(100px);

transform:translate(-50%,-50%);
里面可以设置%或者px

3.2.缩放

transform: scale(2);
 /*x  水平缩放；y  垂直缩放   一个数水平垂直同时缩放*/
  /*x y同时放大两倍*/

3.3.旋转

/*transform-origin: bottom left;  绕着图片或其他的左上角*/
绕着这个点旋转 以图片或其他为标准 ，谁转就设置在谁身上
transform-origin: 20px 30px;

谁转就设置在谁身上
transform: rotate(90deg);

3.4.倾斜

谁倾斜就设置在谁身上
向左倾斜10度   	x，y
transform: skew(10deg,0);