CSS教程：transform属性介绍

文章类别：div+css | 发表日期:2012-7-3 13:17:18

CSS教程：transform属性介绍

CSS3有一个变形相关的属性，transform；
使用这个属性可以进行 :
translate(x, y); 移动元素的坐标。
rotate(30deg); 旋转元素。
scale(x, y); 缩放。
skew(x, y); 元素的倾斜。

    以上操作默认是元素的中心点来进步变换的，很多时候我们需要去改变他；

    transform-origin:x y;属性，也需要使用坐标参数，他的可用值有下面这些 ：
left，center，top，bottom
50%，50%
0px，0px

示例：让元素的变形基准点为左下角，假设元素高度100px,有下面三种写法

transform-origin: left bottom;
transform-origin: 0% 100%;
transform-origin: 0 110px;

针对不同的浏览器可用加上特有的前缀 ：
-moz-transform-origin，-o-transform-origin， -webkit-transform-origin

上一篇：{实例}CSS教程:制作网页变色按钮 人气:2034
下一篇：{实例}CSS教程：新浪微博的三角图像模拟代码 人气:2030

div+css视频教程