在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)
範例：
<!DOCTYPE html>
<html>
<head>
<title>CSS3缩放scale()用法</title>
<style type="text/css">
*,
*: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);
}
</style>
</head>
<body>
<!-- scale-->
<div class="card">
<div class="box scale">
<div class="fill"></div>
</div>
<p>scale(2)</p>
</div>
<div class="card">
<div class="box scaleX">
<div class="fill"></div>
</div>
<p>scaleX(2) </p>
</div>
<div class="card">
<div class="box scaleY">
<div class="fill"></div>
</div>
<p>scaleY(2) </p>
</div>
</body>
</html>
以上是在css3中可實現縮放效果的是什麼屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
