CSS3 transform 元素的变形效果

  • transform过渡效果配置

一.元素旋转

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

二.元素缩放

  1. 缩放前
  1. 水平、垂直方向缩放后
  • 内容与盒子一起缩放

image.png
  1. 配合动画缩放
  1. 多种变形效果一起实现

三.元素扭曲

  1. 应用
纵向扭曲30度

文字和图形一起扭曲
  1. 闪光效果实现

四.元素平移

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

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

  1. 元素如果有固定宽高,上下左右距离都设置为0，margin:auto
position:fixed/absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
  1. 上左50%，再向上向左移动高和宽的一半
  1. 没有固定宽高（通过文字撑起来的模块）
这里translate中的50%，是指它本身宽高的50%
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容