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

作者:袖梨 2022-06-25

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.倾斜



 
 块状元素倾斜实例

 


 


 

 


 

相关文章

精彩推荐