首頁  >  文章  >  web前端  >  在css3中可實現縮放效果的是什麼屬性

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

青灯夜游
青灯夜游原創
2022-04-25 15:51:332006瀏覽

在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中可實現縮放效果的是什麼屬性

(學習影片分享:

css影片教學web前端

以上是在css3中可實現縮放效果的是什麼屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn