在css3中可实现缩放效果的是什么属性

PHP中文网 • 2025年3月11日 20:20:19 • 编程技术 • 阅读 2

在css3中可实现缩放效果的是transform属性。transform属性可以和scaleX()函数实现水平方向的缩放效果、可以和scaleY()函数实现垂直方向的缩放效果、可和“scale(x,y)”函数实现水平方向和垂直方向同时缩放。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css3中可实现缩放效果的是transform属性。

transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

transform属性配合缩放方法可以将元素根据中心原点进行缩放。

立即学习“前端免费学习笔记（深入）”；

css3缩放方法有3种情况：

（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；

1、scaleX(x)

语法：

transform:scaleX(x)

登录后复制

说明：

x表示元素沿着水平方向（X轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

大家想想倍数是怎样一个概念就很好理解了。

2、scaleY(y)

语法：

transform:scaleY(y)

登录后复制

说明：

y表示元素沿着垂直方向（Y轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

3、scale(x,y)

语法：

transform:scale(x,y)

登录后复制

说明：

x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。

注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。

举例：

nbsp;html>CSS3缩放scale()用法*,*:after,*:before {box-sizing: border-box;}body {background: #F5F3F4;margin: 0;padding: 10px;font-family: 'Open Sans', sans-serif;text-align: center;}h1 {color: #4c4c4c;font-weight: 600;border-bottom: 1px solid #ccc;}h2,h4 {font-weight: 400;color: #4d4d4d;}.card {display: inline-block;margin: 10px;background: #fff;padding: 15px;min-width: 200px;box-shadow: 0 3px 5px #ddd;color: #555;}.card .box {width: 100px;height: 100px;margin: auto;background: #ddd;cursor: pointer;box-shadow: 0 0 5px #ccc inset;}.card .box .fill {width: 100px;height: 100px;position: relative;background: #03A9F4;opacity: .5;box-shadow: 0 0 5px #ccc;-webkit-transition: 0.3s;transition: 0.3s;}.card p {margin: 25px 0 0;}.scale:hover .fill {-webkit-transform: scale(2, 2);transform: scale(2, 2);}.scaleX:hover .fill {-webkit-transform: scaleX(2);transform: scaleX(2);}.scaleY:hover .fill {-webkit-transform: scaleY(2);transform: scaleY(2);}
scale(2)
scaleX(2) 
scaleY(2)

登录后复制