transform属性允许对元素设置旋转，倾斜，缩放移动等样式。 当前版本的chrome，safari，Firefox，Opera以及IE10都支持transform属性，但为了以防低版本的兼容问题，最好还是加上浏览器前缀
-ms-transform：IE9 支持加了前缀的tranform属性，然而只适用2D转换
属性值的使用及种类如transform:transformX(x)，具体可以看这里，现列几个个人认为经常用到的 2D：
rotate(angle)：旋转，单位是degtranslate(x,y)，translateX(x)，translateY(x)：位置移动scale(x,y)，scaleX(x)，scaleY(x)：2D缩放，x与y表示横纵坐标缩放的倍数3D：
rotateX(angle)：元素的中心线沿着X轴旋转（可以借此制作一些点击有回弹的圆形按钮）rotateY(angle)：元素的中心线沿着Y轴旋转rotateZ(angle)：沿着Z轴旋转，如同2D中rotatetransition属性，具体就是检测一个css属性值（也可以指定多个或检测全部），然后当该属性发生变化，无论是通过:hover伪类选择器还是通过JavaScript实现的样式变化，该样式的变化过程都会呈现出动画般的效果。 IE**10**、Firefox、Opera 和 Chrome 支持transition-property属性，而Safari 则需要加上前缀-webkit-
transition的语法为：
transition:property,time,speed,delay其中
property：表示检测的CSS属性值，可以定义all；若想要定义多个，则需要定义transition-property属性了，定义的多个CSS属性以逗号隔开。另外，在定义检测的CSS属性值之前，要确保该CSS属性值已经定义了，否则无效time：定义过渡时间speed：定义速度，如： linear：相同速度开始至结束ease：慢速开始，然后变快，然后慢速结束ease-in-out：以慢速开始和慢速结束还有ease-in，ease-outdelay：定义多久后开始如需在 CSS3 中创建动画，则需要了解@keyframes 规则。 语法：
@keyframes animationname { keyframes-selector {css-style;} }在一些旧版本中，还需要添加前缀，如 @-moz-keyframes，@-webkit-keyframes，
animationname 表示该动画名称，用于需在定义动画元素中定义keyframes-selector 表示动画时长百分比，主要的属性值有： 0% 至 100%from 等同于0%to 等同于100%定义好 @keyframes 后，然后要在需要绑定动画效果的元素上定义 animation 属性，animation 属性是一个简写属性，用于设置六个动画属性：
animation-name ：绑定 @keyframes 的名称，必须定义animation-duration ：定义持续时间，带单位s，必须定义animation-timing-function：动画速度曲线animation-delay：动画前的延迟，带单位sanimation-iteration-count：播放次数，属性值有数字以及infinite（循环）animation-direction：动画结束后是否反向播发，属性值有normal以及alternate，定义该属性，animation-iteration-count 次数不能为1注：以上所有属性，在比较老的版本需要定义前缀-moz-，-webkit-，-o-
counter-reset属性用于排序以达到类似有序列表的效果，使用方法是：
先定义counter-reset属性，定义完counter-reset属性之后，定义需要计算元素的:before伪类中content属性，并添加上counter-increment属性eg：
<!DOCTYPE html> <html> <head> <title>123</title> <style type="text/css"> .abvc{ counter-reset:section 2;/* 后面的数字2表示从什么数字开始 */ } .test/* 可定义在.abvc h1或body等等 */ { counter-reset:subsection; } h1:before { content:"Section " counter(section) ". ";/* content属性值可以拼接，只需用双引符以及空格隔开 */ counter-increment:section;/* 序号加1 */ } h2:before { counter-increment:subsection;/* 序号加1 */ content:counter(section) "." counter(subsection) " "; } </style> </head> <body> <div class="test"></div> <div class="abvc"> <h1>a</h1> <h1 id="stop">a</h1> <h1>a</h1> <h2>b</h2> <h2>b</h2> <h2>b</h2> </div> </body> </html>注:
counter-reset属性只需在真正实现计算器的元素之前定义即可:after伪类以及:before伪类中的content属性值可以使用字串符空格隔开的形式进行拼接，而且还可以提取该元素的一些属性值，如<a>元素，其content可以填写为content:'(' attr(href) ')';已提取<a>元素中的href的属性值