8.22_2d转换

2D转换（变换）transform

2d转换就是改变标签在2维平面上的位置、形状的一种技术

2维坐标轴 y轴负值往上 正值往下 x轴负值往左 正值往右

2d移动 translate

是脱离标准流的 类似于定位 区别在于不影响其他元素

2d移动语法:

div{
   transform: translate(50px,50px);
 }

1. 数值可以使用百分比设置
2. 对行内元素无效 因为行内没有高宽 需转换模式

搭配绝对定位让盒子居中：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ABYuwVpA-1586350778670)(8.22.assets/盒子居中.PNG)]

优点：百分比设置会自动计算 盒子高宽改变也会居中

旋转 rotate

旋转语法：

div{
     transform: rotate(0deg/度数);
}

• 正顺负逆：正值顺时针 负值逆时针
• 必须带单位deg
• 默认旋转中心是元素中心点 后续可更改中心点

扩展运动：

三角 只设置右下边框 利用旋转90度达成 和伪元素搭配可实现输入框中的三角效果

设置旋转中心点 origin

语法：
transform-origin：x y;
transform-origin：0% 100%; // 右下角中心

• x y用空格隔开
• 默认中心点是元素中心50% 50%
• 可以用像素精确定位 也可以用方位名词百分比 类似于背景定位

缩放 scale

语法：tansform：scale(x,y);

注 ：

• xy之间用逗号隔开

• 括号内数字不跟单位 相当于倍数

• 小于1等于缩放 两个参数相同时 可以简写一个

• 优势：不影响其他盒子 可以设置缩放中心点 默认中心缩放

• 不能小于0 不能大于1 可以负值 反向缩放

倾斜 skew

transform: skew(xxdeg)

2D转换综合性写法

语法：transform：translate移动  rotate旋转  scale缩放等

• 可以同时写多个转换 属性之间用空格隔开

• 顺序会影响最终效果

• 有位移和其他移动效果时 位移写在前面

盒子居中

动画 animation

1. 定义动画

@keyframes 动画名称{
	开始状态
	0% {
		transform：需要使用的效果属性
}
	结束状态
	100% {
		transform：需要使用的效果属性
	}
}
关键词：from=0%，to=100%

2. 调用动画

• animation-name：动画名称；
• animation-duration：持续时间s；

动画序列：

就是由一个当前状态逐渐变化成下一个状态为动画序列

百分比可以更改 百分比一般是整数 百分比就是时间的百分之多少

动画常用属性

运动曲线图

动画简写属性

animation ： 动画名称 持续时间 速度曲线 何时开始 重复次数（infinite ） 方向播放 结束后状态

• 前面两个属性必须写 后面的看情况省略
• 暂停动画不包含在简写内 因为和伪类搭配使用
• 需要添加一组以上的动画 再定义一组动画 属性用逗号“，”分隔

生词：opacity 透明

案例：大数据热点图

小圈圈的扩大用高宽放大比较好 用缩放盒子的影子会一起放大

速度曲线 步长 steps

语法：animation：staps(数字，start/end)；

父盒子宽度÷子盒子宽度=步长

end：默认的

start：开始第一张图看不到 起始位置是第二张 最后一帧是空白帧 不常用