0×1.元素平移
让元素在页面显示中产生位移有很多方法,可以利用块状元素合模型,也可以利用相对和绝对坐标,这一小节给大家介绍css提供的两个元素移动属性:vertical-align和transform;transform为css3标准提供的新属性。
a.内联元素垂直平移
内联元素的平移遵循下面的法则:
默认情况下,元素移动,负值往下,正值往上;
如果默认基线在上面,用负数;
如果默认基线在下面,用正值;
下面用一个实例来演示上面这三条法则:
显示效果:
www.111com.net
自我介绍:
b.块状元素平移
所有内联元素都可以使用display属性转换成块状元素,然后使用本节内容介绍的平移方法,transform属性是css3提供的新属性,请看下面的实例:
显示效果:
0×2.元素变形
a.等比例缩放
等比例缩放能够使元素等比扩大或缩小我们设定的倍数,语法如下:
transform: scale(n);
n默认为1,元素保持正常大小显示,超过1就是等比扩大多少倍(长宽同时扩大),小于1就是等比缩小多少倍;
除此之外,同translate一样,scale也可以单独设置某一条边的缩放,scaleX(n)单独扩大或缩小元素宽度,scaleY(n)单独扩大或缩小元素高度。
显示效果:
b.旋转
块状元素的旋转可以通过transform的rotate值来实现,请看下面的实例:
显示效果:
默认情况下,元素旋转的基准点为块状元素的中心点,可以通过设置transform-origin属性来改变旋转的基准点位置,请看下面的实例:
显示效果:
c.倾斜