前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

 

　　有段时间我是没理清transform、translate、transition和animation之间的关系的，现在整理一下：

• translate：平移；是transform的一个属性；
• transform：变形；是一个静态属性，可以改变元素的形状或位置，做出2d或3d效果；
• transition：过渡，转变；使css属性值在一段时间内平滑的变化，需要有触发条件（如hover等），是animation的简化版；
• animation：动画；可以设置多帧效果，然后把它们组合变换，按动画效果展示出来；

　　　　

• transform，可设置translate（位移）  rotate（旋转）  scale（缩放）  skew（倾斜）；接受多值，用空格分开，并按照从前往后的顺序执行；
• transform-origin，可更改转换元素的基准点（默认值，元素中心，50% 50% 0）；
• transform-style，可设置flat（默认值，2d展示）还是preserve-3d（3d展示）；此属性必须在transform之后使用；
• perspective，设置元素距离视图的距离，默认为0；
• perspective-origin，设置视点（默认值，元素中心，50% 50%），必须和perspective结合使用；
• backface-visibility，设置元素不面向屏幕时是否可见；

1. translate

　　translate（位置平移）

• 可以为负值，向右向下是正值，向上向左是负值；
• 可以为百分比，百分比是基于元素自身宽高的（我们可以利用这一点实现 ）；
• 2d效果可以拆开写成translateX(x)、translateY(y)，也可以直接写成translate(x,y)，缩写中如果只写了一个值，默认是x；
• 3d效果还有translateZ(z)，缩写translate3d(x,y,z)，3d效果中缩写的话，就必须得写3个值，少一个都不行，没有的值可以设为0；

2. rotate

　　rotate（旋转）

• 可以设负值；正值是顺时针旋转，负值是逆时针旋转；
• 可以写成rotateX(deg)、rotateY(deg)、rotateZ(deg)；（角度的单位，负30度就是-30deg）

3. scale

　　scale（缩放）

• 可以是整数，也可以是小数，也可以设置负值；
• 可以写成scaleX(x)、scaleY(y)、scaleZ(z)，也可以缩写成scale(x,y)或者scale3d(x,y,z)；
• 当某值设为0时，就看不见元素了，但是空间还在，和visibility:hidden效果一样；
• 当设置负值的时候，会发生翻转的效果；
• 缩放看起来虽然大小变化了，但占据的空间不变，不会影响布局；
  

　　代码如下：

            
                                      
      
            
                   
       scale可以设置小数，也可以设置负值；虽然大小看起来变化了，但占据的空间不变，不会影响布局        
      
    

4. skew

　　skew（倾斜）

• 可以写成skewX(deg)、skewY(deg)，也可以缩写成skew(x,y)，缩写如果只写了一个值，那就默认仅仅只是x轴；
• 目前没有Z轴的倾斜；
• 围绕X轴倾斜，会保持高度不变，拉长元素，产生变形；围绕Y轴倾斜，会保持宽度不变；
• 可以写负值，（下图为X轴的正值和负值）；

　　代码如下：

 5. transform-origin

　　设置转换元素的基准点，然后元素的变形就围绕这个点展开；

• 默认值是元素中心（50% 50% 0）；
• X和Y轴可以设置单位值、百分比、left | center | right | top | bottom；Z轴只能设置具体单位值；
• 可以设置1-3个值，用空格隔开，如果只写了1个，那么仅仅只是X轴；2个的话，就是X轴和Y轴；

 6. transform-style

　　设定元素及其子元素怎样在三维空间中展示；

• 默认值，flat，2d平面；设置为preserve-3d，就是3d空间；
• 当元素设置overflow:hidden的时候，preserve-ed失效；
• 一般我们在元素的父元素身上使用，因为此属性可以继承；

7. prespective

　　设置元素距离视图的距离

 

• 默认为none（0）；可设置具体值，以像素为单位，不能为负值；
• 我们看远处的物体，会发现看不清，当我们走近一点的时候，就看得清除了，此属性可以理解为我们站的位置离物体的距离；
• 我们一般在变形元素的父元素身上使用，因为浏览器会为其子元素产生透视效果，不会为它本身产生透视效果；设置了此属性的元素我们也叫透视元素；

8. prespective-origin

　　　　设置视点；

• 默认值（50% 50%），可设置单位值、百分比、left | center | right | top | center | bottom ；
• 可以设置1-2个值，设置1个值时，另一个默认为center；
• 可以理解为我们看妹子的时候看的哪个位置，脸？腿？胸？
• 此属性必须定义在设置了prespective属性的元素身上；

9. backface-visibility

　　设置当元素不面向屏幕时，是否可见；如果旋转元素不希望看见其背面时，此属性很好用；

• 默认visible，可设置hidden；

　　代码如下：

　　正方体后面要绕Y轴旋转180度，我一开始没想起来，调了很久；

            
                      
                                  
      
            
       
                
        
上
                
        
下
                
        
左
                
        
右
                
        
前
                
        
后
            
       
        
      
    

 

　　大神还整理了transform的副作用，：

• 设置了 transform:非none; 的元素，可以覆盖标准流元素和低级别的定位元素；
• webkit内核浏览器下，如果父元素设置了 transform:非none; 那么子元素的fixed效果会变成absolute效果；
• 更改定位父级；position:absolute;定位的是祖先元素中第一个position:非static 的元素；但是如果祖先元素中有设置了transform:非none；也可以被定位为父级