translation、transform和translate的区别和联系
程序员文章站
2022-03-18 20:09:39
...
transition和transform都是一种动画，translate是transform里的一个属性
（纯属个人理解，如有错误请大佬指出）
transition（动画效果）
transition(要过渡的属性 花费的时间 运动曲线 何时开始)
要过渡的属性：包括长、宽等等，如果是全部属性，则选择"all"
- 花费的时间：以"s"为单位，如"0.5s"
- 运动曲线：默认为ease(慢-快-慢),其他属性还包括linear(匀速)、ease-in（慢-快）、ease-out（快-慢）ease-in-out(慢-快-慢)
- 何时开始：以"s"为单位，如"0.5s"
通常配合伪类来使用，如下：
<style>
.tr1{
background-color: chocolate;
width: 100px;
height: 100px;
transition: all 2s ease 0s;
}
.tr1:hover{
width: 200px;
}
</style>
<body>
<div class="tr1">hello world</div>
</body>
transform（变形效果）
包含的属性有
- translate(x,y) 平移距离 单位：px / %(仅限x,y轴使用)
- rotate(顺时针角度) 旋转角度 单位：deg
- scale(x,y) 缩放倍数 单位：无
- skew(x,y) 反转角度 单位：deg
- matrix(n,n,n,n,n,n) 把所有 2D 转换方法组合在一起 单位：无
默认反转的轴为盒子的中线，重新确立反转的轴用translate-origin
想要反转有立体的效果，则在父元素上加perspective: **px;(给父元素一个深度)
属性背向屏幕不可见backface-visibility:hidden
上一篇： 平板电脑分类大全详细介绍
下一篇： 动画与变形