您的位置:首页 > Web前端 > CSS

css3 -- 2D变换

2016-05-29 14:09 513 查看
1、transform

1 E{
2     -moz-transform:function(value);
3     -ms-transform:function(value);
4     -o-transform:function(value);
5     -webkit-transform:function(value);
6     transform:function(value);
7 }


2、旋转

1 h2{transform:rotate(-25deg);}


原始的,转换前的元素会保持它在文档流中的位置,所以后续的所有元素都会受到它的影响,经过变换的元素并不影响页面的布局,但它会位于页面剩余部分之上的一个新层次上,这就意味着这个新的元素可以覆盖后续的元素

3、变换原点

1 E{transform-origin:0 0 ;}


4、平移

E{
transform:translateX(value);
transform:translateY(value);
}
E{transform:translate(translateX,translateY);}


经过变换的元素会保留它本身的位置

5、倾斜

E{
transform:skewX(value);
transform:skewY(value);
}
E{transform:skew(skewX,skewY);}


6、缩放

E{
transform:scaleX(value);
transform:scaleY(value);
}
E{transform:scale(scaleX,scaleY);}
使用负值的效果就是垂直的翻转元素
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: