项目二十三　2D变形—— 缩放

项目二十三　2D变形—— 缩放

项目展示

缩放制作烟花效果如图23.1所示，缩放个人相册效果如图23.2所示。

图23.1　缩放制作烟花效果图

图23.2　缩放个人相册效果图

教学内容

2D转换—— 缩放（scale）：即放大和缩小，该属性可以设置元素的放大和缩小。

语法：

transform：scale（x，y）；

其中参数x、y用逗号隔开。

示例如下：

transform：scale（1，1）；宽高是原来的1倍，无变化；

transform：scale（2，2）；宽高是原来的2倍；

transform：scale（2）；只有一个参数时，宽高同时放大2倍；

transform：scale（0.5，0.5）；宽高缩小一半；

当参数为负值时，会进行翻转后再缩放，如：

transform：scaleX（-1）；沿着X轴翻转后缩放。

transform：scaleY（-1）；沿着Y轴翻转后缩放。

transform：scale（-1）；沿着对角线翻转后缩放

scale：默认为中心点缩放，不影响其他的盒子位置。

2D转换-缩放

项目训练

任务要求