CSS基础知识汇总{主要内容：过渡、位移、旋转、缩放}

一、过渡（transition）

 /* 设置过渡的属性 */
 transition-property: width,height;
/* 设置过渡的时间 */
transition-duration: 1s;
 /* 设置过渡的类型 为匀速*/
 transition-timing-function: linear;
 /* 设置延时效果 */
transition-delay: 2s;
/* 连写如下:1s为过渡时间，2s为延时时间，其他无顺序  all代表所有过渡属性 */
transition:all 1s 2s linear;

二、位移

transform: translate(x,y);
如果设置一个值，表示在水平方向移动；如果设置两个值，第一个值代表水平方向，第二个值代表垂直方向；
X和Y可以设置为负数，代表相反方向移动
translate中可以设置百分比，那么该百分比指的是相对元素自身设置的。

三、旋转

transform: rotate(角度)
◆角度的单位是 deg
◆如果设置的是正数那么是顺时针旋转，反之逆时针旋转

四、缩放

transform: scale(2,1);
 ◆scale中设置的值不需要带单位，表示的是一个倍数关系
◆如果设置一个值那么代表元素在水平方向和垂直方式，如果设置两个值，那么第一个值代表水平方向，第二值代表垂直方向
◆如果希望实现放大的效果，那么设置大于1的值，如果希望实现缩小的效果，那么设置大于0小于1的值即可。

五、属性连写

transform:translate(400px) rotate(360deg);

六、倾斜

 transform: skew(45deg,45deg);
  ◆第一个值代表元素沿着x轴倾斜，第二值代表沿着y轴倾斜

七、旋转原点
◆通过transform-origin可以改变原点位置（旋转原点，倾斜的原点）

八、3D转换
（1）位移

 transform: translateX(300px) translateY(300px);

transform:translateX() 沿着x轴位移，取值可以为负值
transform:translateY() 沿着y轴位移，取值可以为负值
transform:translateZ() 沿着z轴位移【会出现近大远小的效果】，取值可以为负值

☞透视：
◆perspective该属性可以实现页面中近大远小的效果。
◆我们需要将该属性设置给设置了transform属性元素的直接父元素。
◆该属性的取值一般在800到1000直接设置
（2）旋转

 transform:rotatex();
 transform:rotatey();
transform:rotateZ()；
 如果设置多个transform值，请使用联写的方式！！！
 

（3）缩放

transform: scaleX(2) scaleY(2)  scaleZ(2);