在css3中可实现缩放效果的属性是哪个
本文小编为大家详细介绍“在css3中可实现缩放效果的属性是哪个”，内容详细，步骤清晰，细节处理妥当，希望这篇“在css3中可实现缩放效果的属性是哪个”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
在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两个方向的缩放倍数是一样的（同时放大相同倍数）。
举例：
<!DOCTYPEhtml><html><head><title>CSS3缩放scale()用法</title><styletype="text/css">*,*:after,*:before{box-sizing:border-box;}body{background:#F5F3F4;margin:0;padding:10px;font-family:'OpenSans',sans-serif;text-align:center;}h2{color:#4c4c4c;font-weight:600;border-bottom:1pxsolid#ccc;}h2,h5{font-weight:400;color:#4d4d4d;}.card{display:inline-block;margin:10px;background:#fff;padding:15px;min-width:200px;box-shadow:03px5px#ddd;color:#555;}.card.box{width:100px;height:100px;margin:auto;background:#ddd;cursor:pointer;box-shadow:005px#cccinset;}.card.box.fill{width:100px;height:100px;position:relative;background:#03A9F4;opacity:.5;box-shadow:005px#ccc;-webkit-transition:0.3s;transition:0.3s;}.cardp{margin:25px00;}.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);}</style></head><body><!--scale--><divclass="card"><divclass="boxscale"><divclass="fill"></div></div><p>scale(2)</p></div><divclass="card"><divclass="boxscaleX"><divclass="fill"></div></div><p>scaleX(2)</p></div><divclass="card"><divclass="boxscaleY"><divclass="fill"></div></div><p>scaleY(2)</p></div></body></html>读到这里，这篇“在css3中可实现缩放效果的属性是哪个”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注主机评测网行业资讯频道。
下一篇：Mybatis-Plus怎么读写Mysql的Json字段