css中的基本简单动画与过度效果

css的过渡动画效果：

transform: translate()

transform: translate()

translateX() => 水平偏移 translateY() => 垂直偏移 translate(x,y) => 水平垂直偏移

里面可以写px或者百分比 百分比参照的是当前盒子的宽和高 所以可以使用translate(-50%, -50%)让定位的盒子水平垂直居中

移动的元素不会对其他盒子造成影响

transform: scale()

取值说明:

scaleX() => 水平缩放 scaleY() => 垂直缩放 scale(倍数) => 整体缩放

里面直接写数值即可 不需要添加单位 可以接受小数

transform-origin: 取值;

取值说明:

1. 方位名词: left right top bottom center

2. 具体的像素: 基于盒子的左上角为原点 X水平向右 Y垂直向下

transform: skew()

取值说明: 1. 斜切的角度 单位是deg 2. skewX() Y轴向X轴倾斜多少度 skew谁 谁的轴保持不变 另外一个轴朝这个轴倾斜对应的角度即可

连写属性：

1. 当元素有多种2D转换的时候 需要采用连写的方式 中间空格隔开

2. 当元素发生了旋转,那么其内部的坐标系也跟着发生了旋转 (推荐先写translate 在写rotate)

3. 当多个转换场景的时候,后面的transform需要将前面的transform的效果复制下来

4. 

 

八卦图动画旋转案例

：

关注走一走，一起谈论前端技术