js控制转盘旋转
function roll(endDeg) { var deg = 0; var doRoll = function() { var timer = setTimeout(function() { $("#lot1").css("transform","rotate("+deg+"deg)"); $("#lot2").css("transform","rotate("+deg+"deg)"); deg += 10; if (deg < endDeg) { doRoll(); } else { clearTimeout(timer); } }, 1); }; doRoll(); } // roll(45);如果需要同时应用多于一种转换效果，需要使用空格，而不是逗号
transform: scale(2, 2) rotate(45deg);
transform-origin：其默认值为 transform 元素的中心点，即 50% 50% ；可以改变这个属性的值，从而改变变换的中心点。
比如将其 transform-origin 设置为 0 0 ，使用 scale() 变换，能明显看出区别。
中心点的设置是相对于元素的左上角，可以使用像素法、百分比法、关键字法自定义变换的中心点。
matrix()：接收 6 个参数：a、b、c、d、e、f
其计算规则为：
其中，x 和 y 表示变换前矩阵偏移元素中心点的坐标；x‘ = ax + cy + e 和 y‘ = bx + dy + f 分别表示变换后的坐标。
中心点的坐标固定为(0, 0)，这个值与 transform-origin 的值无关；也就是说，即使 transform-origin 的值从默认的 50% 50% 被指定为 （假设）30px 30px ，其意为坐标 (0, 0) 从 50% 50% 的位置移动到 30px 30px 的位置； 30px 30px 这个点是新的中心点，其坐标为 (0, 0) 。
假设 matrix(1,0,0,1,30,30) ;
那么 x‘ 和 y‘ 分别等于 x + 30 和 y +30 ；
也就是说，经过矩阵转换之后，(0, 0) 变成 (30, 30) ，(1, 1) 变成 (31, 31) ，以此类推。。。直到变换元素所有的坐标都经过变化之后，在新的位置上组成了一个新的图形。
其结果与 translate(30px, 30px) 完全相同。
其动态演示参考这里
总结
位移：
matrix(1, 0, 0, 1, tx, ty) === translate(tx + "px", ty + "px")
x‘ = x + tx
y‘ = y + ty
缩放：
matrix(sx, 0, 0, sy, 0, 0) === scale(sx, sy)
x‘ = sx * x
y‘ = sy * y
旋转：
matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) === rotate(θ + "deg")
顺序为 CS - SC ；
x‘ = x * cosθ - y * sinθ
y‘ = x * sinθ + y * cosθ
需要传入具体的 cos 或者 sin 值。
斜切：
matrix(1, tan(θy), tan(θx), 1, 0, 0) === skew(θx + "deg", θy + "deg")
x‘ = x * tan(θx)
y‘ = y * tan(θy)
参考：
理解 CSS3 transform 中的 matrix （矩阵）
CSS matrix() 详解
标签：
原文地址：http://www.cnblogs.com/cc156676/p/5784629.html
https://blog.csdn.net/gjc_csdn/article/details/80023286 微信第3方登录
