浅谈transform和transition

transform：指元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transition：指通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变 CSS 的属性值。

1、transform

 语法：

transform: none | transform-functions;

有4种属性

1. rotate（旋转）
   1. 　　例子：transform: rotate(30deg);
2. scale（缩放）
   1. 例子：transform:scale(1.5);//放大1.5倍
   2. 例子：transform:scale(-1，1);//水平镜像
   3. 例子：transform:scale(1,-1);//垂直镜像
3. translate（位移）
   1. 例子：transform:translate(100px,20px);
4. skew（扭曲）
   1. 例子： transform:skew(30deg,10deg);//水平方向扭曲30度，垂直方向扭曲10度。
5. 　

2、transition过渡效果

语法：
transition: property duration timing-function delay;

 

 

transition-property 属性名称、具有过渡的 CSS 属性

 

transition-timing-function

指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，值可以是以下几种函数：

 

 

 

transition-delay 延迟时间