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

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

(學習影片分享:

css影片教學web前端

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

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

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

純CSS3怎麼實現波浪效果? (程式碼範例) 純CSS3怎麼實現波浪效果? (程式碼範例) Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果? (程式碼範例)

巧用CSS實現各種奇形怪狀按鈕(附代碼) 巧用CSS實現各種奇形怪狀按鈕(附代碼) Jul 19, 2022 am 11:28 AM

巧用CSS實現各種奇形怪狀按鈕(附代碼)

css怎麼隱藏元素但不佔空間 css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

css怎麼隱藏元素但不佔空間

css3怎麼實現花邊邊框 css3怎麼實現花邊邊框 Sep 16, 2022 pm 07:11 PM

css3怎麼實現花邊邊框

原來利用純CSS也能實現文字輪播與圖片輪播! 原來利用純CSS也能實現文字輪播與圖片輪播! Jun 10, 2022 pm 01:00 PM

原來利用純CSS也能實現文字輪播與圖片輪播!

css3什麼是自適應佈局 css3什麼是自適應佈局 Jun 02, 2022 pm 12:05 PM

css3什麼是自適應佈局

css3如何實現滑鼠點擊圖片放大 css3如何實現滑鼠點擊圖片放大 Apr 25, 2022 pm 04:52 PM

css3如何實現滑鼠點擊圖片放大

css3動畫效果有變形嗎 css3動畫效果有變形嗎 Apr 28, 2022 pm 02:20 PM

css3動畫效果有變形嗎

See all articles