css3定义缩放(放大与缩小)问题

2019-05-18

css3定义缩放问题,主要应用到一些鼠标特效,鼠标放上去如何放大,传统的需要定义位置,大小等等,现在可以通过 transform属性来定义。还针对一些很小的字体定义,网页字体最小为12px,再小的话需要可以通过缩放来解决,这是一种方法,

第一个部分:scale(x,y)对元素进行缩放

  X所代表的意思就是水平方向缩放的倍数;

  Y所代表的意思就是垂直方向的缩放倍数。



.box:hover{ transform: scale(1.5); }           这是等比例缩放1.5倍的情况

.box:hover{ transform: scale(1.5,3.5); }     这是X方向上放大1.5倍,Y方向上放大3.5倍的情况



 transform属性可以用于任何元素上,
如图片,任意标签,字体等等,有比较强的互动效果,广泛应用于网页的鼠标放上去变大或变小的效果。


示范例子:transform:scaleX(2);


以上是针对在X方向上放大两倍,缩小的话把2改为小于1的数值

示范例子:transform:scaleY(2);

 
示范在垂直方向上放大两倍,缩小的话把2改为小于1的数值