变形:位移、旋转、放缩、斜切和多列布局
一、变形:位移、旋转、放缩、斜切
语法:
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;