学习css的时候，有时候用到这三个概念，写的时候经常会写混，现在对这三个东西作一个归纳总结。
transition----过渡
transition表示的是一种属性的改变，可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟一种过渡动画效果。transition有以下属性：
-
transition-property 规定设置过渡效果的 CSS 属性的名称。
-
transition-duration 规定完成过渡效果需要多少秒或毫秒。
-
transition-timing-function 规定速度效果的速度曲线。
-
transition-delay 定义过渡效果何时开始。
接下来用一个实例说明transition的用法：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:400px;
height:400px;
margin-left:20px;
mergin-top:150px;
transition:margin-left 3s;
-moz-transition:width 3s;
-webkit-transition:width3s;
-o-transition:width 3s; //这个属性在低版本的ie中不会显现
}
div:hover
{
margin-left:300px;
}
</style>
</head>
<body>
<div></div>
<p>鼠标放到div上，div会向右移动</p>
</body>
</html>
transform-----转换,变形
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。这个转换是静态的，固定在远处保持转换之后的样子。常用的属性有以下几类：
- translate（X,Y） 用于规定元素在X,Y轴方向上的偏移（3d时还包括了z轴上的偏移）
- rotate (deg) 用于规定元素在自己位置上旋转的角度（逆时针的deg）
- scale 用于规定元素在宽度和高度上的倍数（把元素的大小以倍数的形式放大缩小）
- skew 用于规定元素在X,Y轴上的倾斜的角度
- matrix 合并了多个转换的方法
具体的参数以及实例可以参照Html中文网
实例内容（采自菜鸟教程）：
width="100%" height="300" src="https://c.runoob.com/iframe/3391" allowfullscreen="allowfullscreen">translate—转换
看到这里，大家应该已经明白了，translate并不是一个特有的大类，translate其实是transform的一个转换的属性，属于transform的一种实现，包含在transform当中
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
