• 利用变形位移居中

1. 子元素宽高改变可以自适应变化
2.子元素不设置宽高也可以拿到宽高的一半
元素{left:50%;top:50%;translate(-50%,-50%);（向左和向上拉取当前元素宽高的一半）
	transform:translateZ(位移值px) 
xyz都位移
	transform: translateX(位移值px) translateY(位移值px) translateZ(位移值px)；
    transform: translate3d(x,y,z)；
形成3d空间/舞台
 
transform-style:flat(平面)/preserve-3d(3d空间); tranform:rotateX(),rotateY();
默认是平面的,如果要看到空间效果的话,需要将平面形成3d空间,一般将该属性添加到变形元素的父元素身上
		transform: rotateX(数值deg)
		transform: rotateY(数值deg)
XY轴都旋转
		transform: rotateX(数值deg) rotateY(数值deg);
		transform: rotate()->z轴旋转
3D旋转
 Z轴
 
transform: rotateZ(数值deg)
transform: rotate3d(a,b,c,d) abc的取值 0/1 0:不旋转 1:旋转 d:旋转角度
persepective:数值px;
值越小越近,看到的越大, 一般加在变形元素的父元素身上
transform-origin:水平 垂直;
值可以是数值+px/数值+%/关键字(left/right/center  top/center/bottom）
backface-visibility: hidden;
 背部隐藏 只能看到正面,看不到背面
 
		transform:scaleX(数字)
		transform:scaleY(数字)
	XY轴缩放
		transform:scaleX(数字) scaleY(数字)
		transform:scale(x,y)  一个值代表x和y的缩放
		transform:scaleZ(数字) 
	XYZ轴缩放
		transform:scaleX(数字) scaleY(数字) scaleZ(数字)
		transform:scale3d(x,y,z)
	 0:隐藏 1:不缩放 0-1：缩小  >1 放大
	transform:skewX(数值deg)
	transform:skewY(数值deg)
XY轴倾斜 
	transform:skewX(数值deg) skewY(数值deg);
	transform:skew(x,y) 只写一个值代表x轴倾斜
变形 xy 3d里面没有倾斜
                    位移2D位移X轴位移	transform:translateX(位移值px) 向右为正 向左为负Y轴位移	transform:translateY(位移值px) 向下为正 向上为负XY同时位移	transform: translateX(位移值px   translateY(位移值px)	ransform: translate(x位移,y位移) 只写一个值代表x轴位移利用变形位移居中1. 子元素宽高改变可以自适应变化2.子元素不设置宽高也可以拿到宽高的一半元素{positio
旋转 rotate(n)
旋转函数rotate()通过指定的角度参数使元素相对原点进行旋转；
n为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；如果为负，逆时针旋转。
代码如下:
下面代码考虑到在不同浏览器兼容性不同
缩放scale()
定义：让元素根据中心原点对对象进行缩放。
3种使用情况：
scale(x,y)...
				
CSS中变形效果-transform（平移、旋转、缩放、倾斜）CSS3实现变形的优势2-D变形平移translate（）1、缩放scale()2、倾斜skew()3、旋转rotate()4、中心点transform-origin3-D变形1、旋转rotate3d()2、视距perspective3、transform-style（用于保存元素的3D 空间4、backface-visibility（定义元素在不面对屏幕时是否可见5、3D转换方法（位移，缩放）兼容性
CSS3实现变形的优势
1、无需加载额外的文
				
一、Z轴平移
z轴平移，调整元素在z轴的位置，正常情况下调整元素和人眼之间的距离，距离越大，元素离人越近，z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看到效果，必须要设置网页的视距
1:设置视距
—perspective [pə'spektiv] 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px
—设置方式一
html{ perspective: 800px; }
—设置方式二：
—perspective(800px) 谷歌要直接设置在tra
				
CSS3中2D转换之位移：
CSS3中移动盒子位置的方法有：定位、改变盒子的外边距、2d转换移动。接下来，我们学习2D转换中位移的方法。
首先，我们给出两个div盒子作为研究对象，举例代码如下：
    <div></div>
    <div></div>
</body>
我们分别给两个盒子设定性质，同时用不同的颜色进行区分，代码如下：
 div:first-child {
        width: 200px;
				
在CSS3中，可以利用 transform ( 变形 ) 功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。
一. 旋转 rotate
用法：transform: rotate(45deg);
共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
二. 缩放 scale
用法：transform: scale(0.5)  或者  transform: scale(0.5, 2)