[CSS] 学习transform translate tran
- transition
- transform
- translate
这个三个CSS属性长得也太像了吧，刚接触的时候傻傻分不清，去翻了一下MDN和W3的文档，简单总结了一下它们是用来做什么的。
transition
transition是一个元素在不同状态之间切换的时候定义不同的过渡效果，是以下几个属性的简写。
- transition-property: none或all或CSS属性名(一个或多个)，默认值是all
- transition-duration: 表示transition效果需要指定多少秒或毫秒才能完成，默认值是0s
- transition-timing-function: 过渡函数，指定transition效果的转速曲线，默认值是 ease
- transition-delay: 延迟时间，定义transition效果开始的时候，默认值是0s
<single-transition>#
where
<single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time>
where
<single-transition-property> = all | <custom-ident>
<easing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier([0,1]>, <number>, [0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
where
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
例子：
// transition.html
// div的背景色为红色，:hover鼠标放上去后变成绿色
// transition实现渐变效果
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 3s;
}
div:hover {
background-color: green;
}
</style>
<div></div>
如果同时要改变颜色和大小
<style>
div {
width: 100px;
height: 100px;
background-color: lightcoral;
transition: background-color, width 4s;
}
div:hover {
width: 300px;
height: 200px;
background-color: green;
}
</style>
<div></div>
"transition: background-color, width 4s" 这里指定是颜色和宽度两个属性，那么高度的变化就不会有动画效果了，如果要包括宽度，可能用"transition: 4s" 或者“transition: background-color, width, height 4s”，因为<transition-property>默认是all。以下两种写法效果一样：
div {
transition-property: background-color, width, height;
transition-duration: 1s, 2s, 3s;
transition-timing-function: ease;
transition-delay: 0s;
}
//等同于
div {
transition: background-color, width, height 1s, 2s, 3s
｝
使用例子
// 把div沿xy轴向右向下移动
div{
transform: translate(120px, 50%);
}
transform
通过修改CSS视觉格式化模型的坐标空间来旋转，缩放，倾斜或平移元素（只能转换由盒模型定位的元素）。
transform的属性可以是none或一个或多个变换函数<transform-function>
- none: 不使用任何变换。
- <transform-function>: 一个或多个变换函数。变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。以下是一些变换函数：
- matrix()
- translate() | translateX() | translateY()
- scale() | scaleX() | scaleY()
- rotate()
- perspective()
- skew()
- ...
translate
translate是transform的一个属性，可独立使用。参考 css-transform/individual-transfroms
Value: none | <length-percentage> [<length-percentage><length>?]?
translate可以接受1-3个值，只有一个或两个值的时候，元素沿着XY轴移动（只有一个值时第二个值默认为0）。三个值的时候，元素沿着XYZ轴作3D变换。
例子
// 把div向右向下移动
// 结合transition可以看到移动效果
<style>
div {
height: 150px;
width: 150px;
background-color: lightgreen;
transition: transform 1s;
}
div:hover {
background-color: lightgreen;
transform: translate(120px, 50%);
}
</style>
<div></div>
为了更好地了解这几个属性，以下例子是在MDN的一个例子的基础上稍作修改：
