transform是css3的新特性之一。有了它可以box module变的更真实,这篇文章将全面介绍关于transform的使用。
transform的作用
transform的兼容写法
div
{
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 */
}
transform语法
transform: none|transform-functions;
transform常用属性
transform:rotate():
transform:translate():
transform:scale():
transform:skew():
transform:matrix
矩阵:matrix以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵。这里推荐大家去看
js对transform的取值和赋值
element.style.webkitTransform = "";
element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";
if(element.currentStyle){
return element.currentStyle['transform'];
}else{
return getComputedStyle(element,null)['transform'];
}