前端学习之路css3(02)-基础知识

2D 转换

在CSS3中，通过转换可以将元素进行移动、比例化、反转、旋转、拉伸。transform属性来实现，它的常用的转换方法，translate、rotate、scale、skew、matrix。

translate

移动，是相对于上次所在位置的移动。
一般写法，transform: translate(50px, 100px); 例子

rotate

旋转一定的角度，以中心为原点正数按照顺时针旋转，负数逆时针。
一般写法，transform: rotate(90deg);例子

scale

按照一定比例进行缩放，两个参数分别是x轴方向和y轴方向缩放系数。
一般写法，transform: scale(1,2)；例子

skew

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
一般写法，transform:skew(anglex, angley);例子

matrix

matrix定义 2D 转换，使用六个值的矩阵，有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。例子

更多2D转换方法参见

---

3D 转换

3D转换分为以x/y轴为中心的转换，有两种方法，rotateX/rotateY。

rotateX

围绕X轴按照一定度数旋转，例子。

rotateY

围绕Y轴按照一定度数旋转，例子。

更多3D转换方法参见

---

过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。必须规定两项内容：1.指定要添加效果的CSS属性；2.指定效果的持续时间。

鼠标放上去使div拉长
宽高翻倍且旋转180度
更多过渡实例

---

动画

在CSS3中我们需要利用@keyframes来创建动画，然后在选择器中用animation引用该动画，并设置动画时长。

@keyframes animation_1{
    from{...};
    to{...};
}
div{
    animation: animation_1 2s;
}

动画是使元素从一种样式逐渐变为另一种样式的效果，我们用0~100的百分比来表示时间进度，from代表0%开始，to代表100%结束。为了得到浏览器最佳支持，我们应该始终定义0%到100%的选择器。

一个移动变色的例子
简写属性的例子

---