css3中transform属性实现平移与变形

时间：2022-06-25 13:34:27 编辑：袖梨来源：一聚教程网

0×1.元素平移

让元素在页面显示中产生位移有很多方法，可以利用块状元素合模型，也可以利用相对和绝对坐标，这一小节给大家介绍css提供的两个元素移动属性：vertical-align和transform；transform为css3标准提供的新属性。

a.内联元素垂直平移
内联元素的平移遵循下面的法则：

默认情况下，元素移动，负值往下，正值往上；
如果默认基线在上面，用负数；
如果默认基线在下面，用正值；

下面用一个实例来演示上面这三条法则：

内联元素垂直平移实例

www.111com.net

自我介绍：

显示效果：

www.111com.net
自我介绍：
b.块状元素平移
所有内联元素都可以使用display属性转换成块状元素，然后使用本节内容介绍的平移方法，transform属性是css3提供的新属性，请看下面的实例：

块状元素平移实例

显示效果：

0×2.元素变形
a.等比例缩放
等比例缩放能够使元素等比扩大或缩小我们设定的倍数，语法如下：

transform: scale(n);
n默认为1，元素保持正常大小显示，超过1就是等比扩大多少倍（长宽同时扩大），小于1就是等比缩小多少倍；

除此之外，同translate一样，scale也可以单独设置某一条边的缩放，scaleX(n)单独扩大或缩小元素宽度，scaleY(n)单独扩大或缩小元素高度。

块状元素缩放实例

www.111com.net

显示效果：

b.旋转
块状元素的旋转可以通过transform的rotate值来实现，请看下面的实例：

块状元素旋转实例

显示效果：

默认情况下，元素旋转的基准点为块状元素的中心点，可以通过设置transform-origin属性来改变旋转的基准点位置，请看下面的实例：

设置旋转基准点实例

显示效果：

c.倾斜

块状元素倾斜实例