变形(transform) 平移 旋转 缩放 透明 transform-style、transform-origin

变形（transform）平移

1.变形是指通过css来改变元素的形状或位置。变形不会影响到页面的布局。

2.transform（用来设置元素的变形效果）

　　-平移：

　　　　-translateX() 沿x轴方向平移

　　　　-translateY() 沿y轴方向平移

　　　　-translateZ() 沿z轴方向平移（调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近。

　　-平移元素百分比是相对于自身计算的，多个用空格隔开。一个元素只能设置一个transform，否则会被覆盖。

3.元素居中：

.box {      
background-color: green;        
    position: absolute;        
    /*需要设置宽高居中，只适用于元素大小确定的*/       
     200px;        
    height: 200px;        
    top: 0;        
    left: 0;        
    right: 0;        
    bottom: 0;        
    margin: auto;     
    /*不用设置宽高，被内容撑开居中*/      
    left: 50%;        
    top: 50%;        
    transform: translateX(-50%) translateY(-50%);   
}

4.z轴属于立体效果（近大远小），默认情况下网页是不支持透明，如果想要看见效果必须要设置网页的视距。

html { 
    perspective: 800px; 
}

旋转

1.通过旋转可以使元素沿着 x y 或 z 旋转指定的角度

　　-旋转：

　　　　-rotateX()

　　　　-rotateY()

　　　　-rotateZ()

　　　　-transform: rotateX(45deg)

　　　　-transform: rotateX(.25turn)

2.backface-visibility: 是否显示元素的背面

　　-可选值：　　

　　　　-visible 显示 默认值

　　　　-hidden 隐藏

缩放

1.对元素进行缩放的函数。

　　-缩放：

　　　　-scaleX() 水平方向缩放

　　　　-scaleY() 垂直方向缩放

　　　　-scaleZ() z轴方向缩放（需要设置3D效果才能看出）

　　　　-scale() 双方向缩放

透明

1.opacity：为元素设置透明效果

　　-opacity: 0.5;

transform-style、transform-origin

1.transform-style:设置3d变形效果

　　-tranform-style: preserve-3d;

2.transform-origin: 设置变形的原点

　　-transform-origin: center;（默认值）

　　-transform-origin: 20px 20px;

学识浅薄，如有错误，恳请斧正，在下不胜感激。