transform属性——css3变形效果2D

一、transform 该属性允许我们对元素进行移动、缩放、旋转或倾斜

transform的属性值如下所示：

1、none 无变换

2、translate 可使用长度值或百分数值，在水平方向、垂直方向或两个方向上

translateX 平移元素

translateY

eg. div{

transform:translate(200px,200px); //向右下移动200px，类似于相对定位

transform:translateX(200px);

transform:translateY(200px);

}

3、scale[skel] 可使用数值，在水平方向、垂直方向或两个方向上缩放元素

scaleX

scaleY

eg. div{

transform:scale(1.5); //元素放大为原来的1.5倍

transform:scaleX(1.5);

transform:scaleY(1.5);

}

4、rotate 可使用角度值，旋转元素

eg. div{

transform:rotate(-45deg); //元素以中心为点，旋转-45度。

}

5、skew[skju] 可使用角度值，在水平方向、垂直方向或两个方向上使元素倾斜

skewX 一定的角度

skewY

eg. div{

transform:skew(45deg,20deg); //X、Y轴分别倾斜45度、20度

transform:skewX(45deg);

transform:skewY(45deg);

}

6、matrix 4~6个数值，逗号隔开，指定自定义变换

通过六个数值指定矩形，其内部公式计算较为复杂，详情百度

不同的值可以累计，通过空格分隔

eg. div{

transform:rotate(-45deg) scale(1.5);

}

二、transform-origin 改变元素变形的基准点，默认是元素的中心位置，如果改变了基准点。

它就会按照这个基准点进行变形。

属性值可以使用关键字，也可以使用百分数和具体值

关键字如下：

1、指定x轴的位置 left、center、right

2、指定y轴的位置 top、center、bottom

eg. div{

transform-origin:left top;

transform-origin:0px 0px;

transform-origin:0% 0%;

}

注意：transform和transform-origin要求的版本比较高，所以除了标准的，最好写上带前缀的。

应用场景：页面上有几个像框，用户点击像框，像框以左上角为基准，实现掉落的动画展示。

最后：本篇博客只是错略的解释了一下transform属性，更详细的解析请看另一篇博客：CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）