最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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)单独扩大或缩小元素高度。
显示效果：
b.旋转
块状元素的旋转可以通过transform的rotate值来实现，请看下面的实例：
显示效果：
默认情况下，元素旋转的基准点为块状元素的中心点，可以通过设置transform-origin属性来改变旋转的基准点位置，请看下面的实例：
显示效果：
c.倾斜
相关文章
- 《无限暖暖》天星之羽获得位置介绍 12-20
- 《流放之路2》重铸台解锁方法介绍 12-20
- 《无限暖暖》瞄准那个亮亮的成就怎么做 12-20
- 《无限暖暖》魔气怪终结者完成方法 12-20
- 《无限暖暖》曙光毛团获得位置介绍 12-20
- 《无限暖暖》日光果获得位置介绍 12-20