【CSS3】标签使用说明

转换（transform）：改变元素的形状、大小和位置。

transform:rotate(20deg)：顺时针旋转20°

rotate()用来2D旋转改变角度。支持负数，表示逆时针。

transform:translate(80px,-20px)：右移80像素，上移20像素

translate()用来移动元素位置。支持负数，表示反方向。

transform:scale(2,4)：宽度变为原来的2倍，高度变为原来的4倍。

scale()用来放大或缩放元素大小。支持负数，但，元素按3D效果翻转180°，如果用于文字将变得不可读。

transform:skew(20deg,30deg)：绕Y轴偏移20°，绕X轴偏移30°

skew()用来2D旋转元素横向和纵向位置。skew(20deg,-20deg)与rotate(-20deg)效果相同，skew设置的正数是逆时针旋转。

transform:matrix()有六个参数，用的矩阵。比较奇葩而且很难理解，就不学习了吧！

matrix()合并了所有的2D方法，旋转（rotate()）、移动(tanslate())、缩放(scale())、倾斜(skew())。

transform:rotateX(20deg)：绕X轴旋转20°

rotateX()用来绕X轴3D旋转元素。相应的有rotateY()绕Y轴3D旋转元素。

过渡（transition）：指定要添加效果的CSS属性和持续时间（默认是0）。

transition:width 2s,transform 3s;：改变宽度效果时持续2秒，改变转换效果时持续3秒。

transition用来使元素从一个效果逐渐过渡到另一个效果。

transition-delay用来设置过渡效果何时开始。

transition-duration规定完成过渡效果需要的时间。个人感觉，除了省去了指定CSS属性名称，效果跟transition并无区别。

transition-property用来指定执行过渡效果的CSS属性。

transition-timing-function用来设定过渡曲线。linear匀速过渡；ease开始慢中间快结束慢；ease-in慢速开始；ease-out慢速结束;ease-in-out慢速开始慢速结束。

动画（animation）：规定动画名称和时长，再用@keyframes创建动画。

div{
  animation:myfirst 5s;   
}
@keyframes myfirst{
  0% {background:red;}
  25% {backgroun:green;}
  100% {background:blue;}
}

0%相当于from，100%相当于to。这段代码是让div元素背景发生变化，持续时间为5秒。

animation-name设置动画名称。

animation-duration规定动画持续时间。

animation-timing-function设置时间曲线，ease开始慢中间快结束慢，ease-in开始慢，ease-out结束慢，ease-in-out慢开始慢结束

animation-delay设置动画何时开始。

animation-iteration-count设置播放次数。可以设置数字，infinite表示一直循环。

animation-direction设置是否反向播放。默认normal，reverse表示反向播放，alternate动画在奇数次时正向，alternate-reverse动画在偶数次时正向。

animation:myfirst 5s ease 2s infinite alternate表示名称为myfirst的动画、持续5s、开始慢中间快结束慢、延时2秒开始动画、循环播放、奇数次时正向播放偶数次时反向播放。

渐变（gradient）

background:linear-gradient(red,blue)设置背景色从上到下从红色线性渐变到蓝色。

background:linear-gradient(to right bottom,red,blue)设置从左上角到右下角渐变，这是标准写法，一般放最下面。

background:-webkit-linear-gradient(left top,red,blue)chrome和Safari写法。

background:-moz-linear-gradient(right bottom,red,blue)Firefox写法。

background:-o-linear-gradient(right bottom,red,blue)opera写法。

可以多种颜色渐变，可以任意角度渐变，颜色可以使用rgba，可以多条线性渐变repeating-linear-gradient(right,red 20%,blue 10%)

radial-gradient径向渐变