利用transform 可以实现旋转、缩放、倾斜、移动
属性有:translate、scale
移动:
translateX(10px); //水平方向移动10px
translateY(50px); //垂直方向移动50px
translate(10px); //水平方向移动10px
translate(10px,50px); ///水平方向移动10px,垂直方向移动50px
缩放:
scaleX(2); //宽增大为原来的两倍
scaleY(2); //高增大为原来的两倍
scale(2); //增大为原来的2倍
scale(1,2); //宽不变,高增大为原来的2倍
旋转:
rotate(30deg); //旋转30度
倾斜:
skewX(30deg); //沿着X轴倾斜30度
skewY(30deg); //沿着Y轴倾斜30度
skew(10deg,20deg); //沿X轴倾斜10度,沿Y轴倾斜20度
当然,要兼容的话就要写全前缀了:如
transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */
matrix:比较复杂,涉及到矩阵的运算,对应的矩阵是
(省略1w+字..)
只需要给abcdef附上相应的值就可以了
translate(tx,ty)可以由matrix(1,0,0,1,tx,ty)转换而来
scale(sx,sy)可以由matrix(sx,0,0,sy,0,0) 转换而来
rotate(θ)可以由matrix(cosθ,sinθ,-sinθ,cosθ,0,0) 转换而来
skew(θx,θy)可以由matrix(1,tan(θy),tan(θx),1,0,0) 转换而来
更多看此文章:http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
演示:http://peterned.home.xs4all.nl/matrices/