CSS3 : transform 用于元素样式的转变，比如使元素发生位移、角度变化、拉伸缩小、按指定角度歪斜
transform结合transition可实现各类动画效果
transform ：
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像素
2、使元素按指定角度旋转多少度：rotate，语法： rotate(角度值deg)
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度，如果值是负值，则是逆时针旋转
3、使元素按指定的倍数拉伸或缩小，里面的字体也会同时拉伸或缩小：scale，语法：scale(X轴倍数, Y轴倍数)
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倍
4、使元素歪斜给定的角度：skew，语法：skew(x轴角度值deg,y轴角度值deg)
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：
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 属性可以使元素样式发生转变
原文地址：https://www.cnblogs.com/wm218/p/9246560.html