2022-05-26
transform的特点
transform特点
特点： 1.transform可以增大盒子的层级； 2.transform对于行内元素不起效果
技巧：
1.如果 translate(一个值) 表示x轴方向的移动，y轴不动
2.X,Y小写大写都有效果
02绝对定位元素居中
父元素｛
宽，高，盒子边框，相对定位
｝
子元素｛
绝对定位，宽高，left，top，
相对位移（transform（-50%， -50%））
｝
相对位移小案例03
m0+p0+bx
margin0
padding0
box-sizing：border-box；
transition（过渡）
transform：rotate （旋转）
顺时针：正
逆时针：负
平面转换
转换原点：
transform-origin：
可以取方位名词：left right center等
可以具体的像素单位px
正负均可 按照XY轴正负取值
可以百分比取值，参考盒子自身的尺寸
旋转效果
transform是复合属性，复合了平移，旋转，缩放
连写顺序 平移要先写，再写旋转
因为旋转会改变坐标轴的方向。
缩放效果
如果缩放只设置一个值，那么控制的是宽度的缩放，高度等比例缩放。
缩放：scale（）大于1表示放大，小于1表示缩小。
transform：scale（）
元素的整体透明度：
opacity：0；
缩放小案例
注意transform的层叠性问题，因为transform本身就是连写属性，用的多的时候很容易因为重叠而导致属性值被覆盖。
缩放常用属性
opacity 透明度
overflow：hidden；溢出隐藏
position 定位
transform 位移、旋转、缩放
transition 过渡属性
快捷输入记法
w50p+h50p宽高快捷输入
渐变属性
background-image：linear-gradient（
color，
color；
）
方位改变 方位
background-image：linear-gradient（
to 方位，
color，
color，
color；
）
颜色可以一直添加
方位改变 角度deg
background-image：linear-gradient（
角度deg，
color，
color；
）
渐变属性颜色参考网站
渐变小案例
透明 transparent
华为综合案例
清除li 的小圆点
list-style：none
布局思路
1.样式初始化；
2.画盒子（摆好最外层的盒子即可）
3.填充内容
4.修改文字样式 color font
5.改变文字的位置 ti tac ln m p
改变定位元素的遮罩层
z-index
过渡给了hover会有来无回
\
