html 图片使用scale,缩放：scale() - CSS3 | 绿叶学习网

在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。

语法：

transform: scaleX(x); /*沿X轴方向缩放*/

transform: scaleY(y); /*沿Y轴方向缩放*/

transform: scale(x, y); /*沿X轴和Y轴同时缩放*/

说明：

跟translate()方法类似，缩放也有3种情况：scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数，参数y表示元素在y轴方向的缩放倍数。

当x或y取值为0~1之间时，元素进行缩小；当x或y取值大于1时，元素进行放大。大家思考一下“倍数”的概念，很快就懂了。

举例：scaleX(x)

#origin

{

width:200px;

height:100px;

border:1px dashed gray;

}

/*设置当前元素样式*/

#current

{

width:200px;

height:100px;

color:white;

background-color: rgb(30, 170, 250);

opacity: 0.6;

transform:scaleX(1.5);

}

浏览器预览效果如下图所示。

分析：

transform:scaleX(1.5);表示元素在x轴方向放大为原来的1.5倍。如果把1.5改为0.5，则元素会在x轴方向缩小为原来的0.5倍，此时预览效果如下图所示。

实际上，transform:scaleX(1.5);其实可以等价于transform:scale(1.5, 0);，小伙伴们可以自行测试一下。

举例：scaleY(y)

#origin

{

width:200px;

height:100px;

border:1px dashed gray;

}

/*设置当前元素样式*/

#current

{

width:200px;

height:100px;

color:white;

background-color: rgb(30, 170, 250);

opacity: 0.6;

transform:scaleY(1.5);

}

浏览器预览效果如下图所示。

分析：

transform:scaleY(1.5);表示元素在y轴方向放大为原来的1.5倍。如果把1.5改为0.5，则元素会在y轴方向缩小为原来的0.5倍，此时浏览器预览效果如下图所示。

实际上，transform:scaleY(1.5);其实可以等价于transform:scale(0, 1.5);，小伙伴们可以自行测试一下。

举例：scale(x, y)

#origin

{

width:200px;

height:100px;

border:1px dashed gray;

}

/*设置当前元素样式*/

#current

{

width:200px;

height:100px;

color:white;

background-color: rgb(30, 170, 250);

opacity: 0.6;

transform:scale(1.2, 1.5);

}

浏览器预览效果如下图所示。

分析：

transform:scale(1.2, 1.5);表示元素在x轴和y轴两个方向上同时放大，x轴方向放大为原来的1.2倍，y轴方向放大为原来的1.5倍。实际上，transform:scale(1.2, 1.5);其实可以等价于以下代码：

transform:scaleX(1.2);

transform:scaleY(1.5);

总结

以上是生活随笔为你收集整理的html 图片使用scale,缩放：scale() - CSS3 | 绿叶学习网的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。