CSS3 transform 元素的变形效果

• transform过渡效果配置

一.元素旋转

• 元素旋转后还是占用它原有位置，只不过旋转后的部分溢出了

二.元素缩放

1. 缩放前

2. 水平、垂直方向缩放后

• 内容与盒子一起缩放

image.png

3. 配合动画缩放

4. 多种变形效果一起实现

三.元素扭曲

1. 应用

纵向扭曲30度

文字和图形一起扭曲

2. 闪光效果实现

四.元素平移

1. 不脱离文档流平移定位，以前的定位元素是脱离了文档流进行定位的
2. 之前定位过的元素，可以接着使用translate去在原基础上平移

五.元素水平垂直居中的三种方法

1. 元素如果有固定宽高,上下左右距离都设置为0，margin:auto

position:fixed/absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;

2. 上左50%，再向上向左移动高和宽的一半

3. 没有固定宽高（通过文字撑起来的模块）

这里translate中的50%，是指它本身宽高的50%