translate，transform以及transition的学习过程（一）

1. 先来说说transform和translate吧

emmm，不知道是否是对的，个人理解，transform的作用很简单，他就是一个对HTML元素进行2D或者3D转换的一个函数。比如，你可以对一个DIV元素进行旋转、缩放、移动或倾斜等操作。注意，不同浏览器中使用该函数的方法并不相同，例子如下:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

transform的用法很多，具体可以查看[W3C相关内容]，而其中一个用法就是translate(https://www.w3school.com.cn/cssref/pr_transform.asp)
所以我们想移动当前元素的话就可以这样(往上移动 10 像素，往右移动 10 像素)：

transform: translate(-10px, 10px);

而如果你想使用多个转换效果，那你还可以这么做：

transform: translate(10px, 10px) rotate(10deg);

仔细看，转换函数之间可没有逗号。

transform还有很多十分值得去了解的用法，有机会我应该会再阐述的。

2.好吧，那就再来看看transition

emmm,应该可以这么理解，transition可以把鼠标点击效果用动态或者自己喜欢的方式展示出来。例如：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s ease; /* Firefox 4 */
-webkit-transition: width 2s ease; /* Safari 和 Chrome */
-o-transition: width 2s ease; /* Opera */
}

div:hover
{
width:300px;
}

这段代码的功能就是把div的宽度在点击后以两秒的时间从100px拓宽到300px。ease是时间过渡曲线，而更多的过渡效果可以参考链接

刚入坑，以后有时间会继续更。