在css3中可實現縮放效果的是什麼屬性-前端問答-PHP中文網

首頁

web前端

前端問答

在css3中可實現縮放效果的是什麼屬性

Apr 25, 2022 pm 03:51 PM

css3

在css3中可實現縮放效果的是transform屬性。 transform屬性可以和scaleX()函數實現水平方向的縮放效果、可以和scaleY()函數實現垂直方向的縮放效果、可和“scale(x,y)”函數實現水平方向和垂直方向同時縮放。

在css3中可實現縮放效果的是什麼屬性

本教學操作環境：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兩個方向的縮放倍數是一樣的（同時放大相同倍數）。

範例：

<!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: &#39;Open Sans&#39;, 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中可實現縮放效果的是什麼屬性