[分享]css3动画缩放的方向

CSS3动画的缩放效果在页面设计中十分常见。下面我们将介绍缩放方向的设置方法。

/* 语法 */
transform: scale(x, y); 

/* 示例 */
div{
  transform: scale(2, 1.5);
}

/*说明 */
x：表示在X轴方向上的缩放比例，值为整数或小数。 
y：表示在Y轴方向上的缩放比例，值为整数或小数。 

其中x和y的值都为1时，代表原始大小。当x值大于1时，元素将会水平放大，而当小于1时元素会水平缩小。同理，当y值大于1时，元素纵向放大，而当小于1时元素会纵向缩小。如果只设置一个参数，那么它将同时作用于X和Y轴。

以上就是关于CSS3动画缩放方向的简单介绍，通过这样的代码设置，可以让页面元素的缩放效果更加生动形象。