变形：位移、旋转、放缩、斜切和多列布局

变形：位移、旋转、放缩、斜切和多列布局

一、变形：位移、旋转、放缩、斜切

​ 语法：
transform：变形的方式;

1. 位移

transform：translate(x,y);
transform：translateX(*px);
transform：translateY(*px);
transform：translateZ(*px);

同一属性，一起使用会发生覆盖，若想一起使用用transform（）或者transform：translateX(*px) ``translateY(*px) ``translateZ(*px) ``translate3d()

2. 旋转

transform：rotate(*deg);     //[平面旋转]同上，也有XYZ，3d轴旋转

3. 放缩

transform：scale（x,y）        //[x对应宽度变化的倍数，y对应高度变化的倍数] 同上，也有xyz轴，3d

4. 斜切 skew（）【了解】
5. 其他属性

• 改变元素变形的基点

  transform-origin：x，y，z；
  

• 景深【元素距离眼睛的距离】

  perspectIve：0px；
  

• 2d转换成3d

  transform-style：preserve-3d；
  

二、多列布局

column-width: 240px;    		//列宽
column-count: 3;        		//列数
column-gap: 10px;       		//列与列之间的间隔
column-rule: 1px solid red  	        //列边框

三、知识补充

1. z-index：元素在z轴上的堆叠层次

 z-index：数字;
//元素默认值为0，值大的盖住值小的。
//该属性要生效，必须要设置定位才可以，position

2. 三角形实现步骤

• 设置一个div宽高为0

• 设置div四边边框为透明色 transparent

• 在设置想要的三角形添加颜色

3. seo的：

<meta name='description' content='描述文字'/>
<meta name='keywords' content='关键字'/>

4. 兄弟选择器

a+b 相邻 选中与a相邻的兄弟b【直选中a后的】

a~b 同级兄弟 选中a后面的所有兄弟b

5. 变形顺序，会影响实际效果

四、响应式原理：利用媒体查询

语法：

@media 设备 and （条件）{
    //满足条件的时候要设置的样式，按照css基本语法写就好
}

​ 设备： all（所有设备） print（打印机） screen（屏幕）
条件： max-width：*px 或者 min-width：*px；