标签：-o 样式 字体 写法 col 百分比 浏览器 语法 会同
transform 兼容各浏览器写法如下：
1 transform: /* 转变样式 */; 2 -ms-transform: /* 转变样式 */; /* IE 9 */ 3 -webkit-transform: /* 转变样式 */; /* Safari and Chrome */ 4 -o-transform: /* 转变样式 */; /* Opera */ 5 -moz-transform: /* 转变样式 */; /* Firefox */
可转变样式如下：
1、使元素位置移动：translate，语法：translate(x坐标, y坐标)
1 transform: translate(50px,100px); 2 -ms-transform: translate(50px,100px); /* IE 9 */ 3 -webkit-transform: translate(50px,100px); /* Safari and Chrome */ 4 -o-transform: translate(50px,100px); /* Opera */ 5 -moz-transform: translate(50px,100px); /* Firefox */
以上代码使元素位置横向移动50像素，纵向移动100像素
1 transform: rotate(30deg); 2 -ms-transform: rotate(30deg); /* IE 9 */ 3 -webkit-transform: rotate(30deg); /* Safari and Chrome */ 4 -o-transform: rotate(30deg); /* Opera */ 5 -moz-transform: rotate(30deg); /* Firefox */
以上代码使元素顺时针旋转30度，如果值是负值，则是逆时针旋转
1 transform: scale(2,4); 2 -ms-transform: scale(2,4); /* IE 9 */ 3 -webkit-transform: scale(2,4); /* Safari 和 Chrome */ 4 -o-transform: scale(2,4); /* Opera */ 5 -moz-transform: scale(2,4); /* Firefox */
以上代码使元素的宽度拉伸2倍，高度拉伸4倍
1 transform: skew(30deg,20deg); 2 -ms-transform: skew(30deg,20deg); /* IE 9 */ 3 -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ 4 -o-transform: skew(30deg,20deg); /* Opera */ 5 -moz-transform: skew(30deg,20deg); /* Firefox */
transform-origin用于设置旋转元素的基点位置，兼容语法：
1 transform-origin: /* 位置设置 */; 2 -ms-transform-origin: /* 位置设置 */; 3 -webkit-transform-origin: /* 位置设置 */; 4 -moz-transform-origin: /* 位置设置 */; 5 -o-transform-origin: /* 位置设置 */;
位置设置，分三处设置，语法：
1 transform-origin: x-axis y-axis z-axis;
x-axis ： X轴线位置
y-axis ：Y轴线位置
z-axis ： Z轴线位置
位置可以是具体数值、百分比、left、right、center
数值示例：
1 transform-origin:0 100;
百分比示例：
1 transform-origin:20% 40%;
默认值设置：
1 transform-origin: left center;
CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变
标签：-o 样式 字体 写法 col 百分比 浏览器 语法 会同
原文地址：https://www.cnblogs.com/wm218/p/9246560.html
