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

本文链接：https://blog.csdn.net/weixin_43989621/article/details/118732117

本文介绍了CSS中的变形技巧，包括位移、旋转、放缩、斜切和多列布局的实现方式。变形可通过transform属性完成，如translate()用于位移，rotate()用于旋转，scale()用于放缩。同时，transform-origin可以改变元素变形的基点，perspective定义了景深。多列布局则通过column-width、column-count和column-gap等属性实现。此外，还提到了SEO优化中的meta标签使用和响应式设计的媒体查询原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

语法：
transform：变形的方式;

位移

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

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

旋转

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

放缩

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

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

改变元素变形的基点
```
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  	        //列边框

三、知识补充

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

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

三角形实现步骤

设置一个div宽高为0
设置div四边边框为透明色 transparent
在设置想要的三角形添加颜色

seo的：

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

兄弟选择器

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

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

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

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

语法：

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

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