CSS3不同内核浏览器的书写规则（-ms/-moz/-webkit/-o-transform）

　　CSS3 新增的属性与 CSS2 有些不同，在定义样式的时候，CSS2 不用区分不同内核的浏览器，而 CSS3 却需要区分，这给定义CSS样式带来诸多不便。其实现在的浏览器大多都遵循 W3C 标准了，也像 CSS2 一样每种样式只写一次就行了，而不用每种内核的浏览器定义一次样式。不过，如果要求网站能在低版本的浏览器运行，还需要为每种内核的浏览器定义一次样式。

　　既然当前还有用户使用低版本的浏览器，我们还需要知道如何定义不同内核浏览器的样式，否则就会出现兼容性问题，在一种内核的浏览器能正常运行，而在另一种内核的浏览器不能正常运行。

　　一、CSS3不同内核浏览器的书写规则

　　以下是当前几种主流浏览器（ie/edge、Webkit（Chrome/谷歌 和 Safari/苹果）、firefox（火狐）和 Opera）的CSS3书写规则：

　　ie(edge)：以 -ms 开头；

　　Webkit(Chrome/谷歌 和 Safari/苹果)：以 -webkit 开头；

　　firefox（火狐）：以 -moz 开头；

　　Opera：以 -o 开头。

　　二、CSS3不同内核浏览器的书写规则举例

　　假如以定义 transform（变形） 为例，transform 共有五种变化形式，分别为：translate（移动）、rotate（旋转）、skew（扭曲）、scale（缩放）和 matrix（矩阵变形），我们就以定义最简单的 translate（移动）为例。

　　htm代码：
　　<div class="CSS3Test">CSS3不同内核浏览器的书写规则（@-ms/@-moz/@-webkit/@-o-transform）</div>

　　CSS代码：
　　<style type="text/css">
　　.CSS3Test
　　{
　　　　-webkit-transform:translate(30px, 20px);//webkit内核浏览器（Chrome/谷歌 和 Safari/苹果）
　　　　-ms-transform:translate(30px, 20px);//ie（edge）内核浏览器
　　　　-moz-transform:translate(30px, 20px);//firefox（火狐）内核浏览器
　　　　-o-transform:translate(30px, 20px);//Opera 内核浏览器
　　　　transform:translate(30px, 20px);//W3C标准浏览器
　　}
　　</style>

　　以上代码是把 div 往X轴方向移动30像素，往Y轴方向移动20像素，针对每种内核的浏览器都定义了一次。