CSS的转换属性可以用来改变HTML元素的外观,例如缩放、旋转、移动等等。下面我们来介绍几种常用的转换属性:
transform: translate(x,y);
此属性可以用来将HTML元素在页面上进行移动,x和y分别为水平和垂直方向上的移动距离,单位为像素(px)。例如,以下代码将一个div元素向右移动50个像素:
div{ transform: translate(50px, 0); }
transform: rotate(angle);
此属性可以用来将HTML元素在页面上进行旋转,angle为旋转角度,单位为度(deg)。例如,以下代码将一个div元素旋转45度:
div{ transform: rotate(45deg); }
transform: scale(x,y);
此属性可以用来将HTML元素在页面上进行缩放,x和y分别为水平和垂直方向上的缩放比例。例如,以下代码将一个div元素在水平方向上缩小一半:
div{ transform: scale(0.5, 1); }
除了以上介绍的三种转换属性之外,还有许多其他的转换属性可以用来实现更加丰富的效果。需要注意的是,转换属性只是改变了元素的外观,而并不影响元素在页面上所占的空间大小。