溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css3中傾斜的函數(shù)是哪個(gè)

發(fā)布時(shí)間：2022-06-02 09:42:37 來(lái)源：億速云 閱讀：121 作者：zzz 欄目：web開(kāi)發(fā)

這篇文章主要介紹“css3中傾斜的函數(shù)是哪個(gè)”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css3中傾斜的函數(shù)是哪個(gè)”文章能幫助大家解決問(wèn)題。

css3中的傾斜函數(shù)有三個(gè)：1、skew()，和transform屬性一起使用可以定義沿著X和Y軸的2D傾斜轉(zhuǎn)換；2、skewX()，和transform屬性一起使用可以定義沿X軸的2D傾斜轉(zhuǎn)換；3、skewY()，可定義沿Y軸的2D傾斜。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3中的傾斜函數(shù)有三個(gè)：

  • skew()

  • skewX()

  • skewY()

這三個(gè)傾斜函數(shù)配合transform 屬性一起使用（作為屬性值使用），就可以實(shí)現(xiàn)元素的傾斜。

值描述
skew(x軸角度,y軸角度)定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。
skewX(角度)定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。
skewY(角度)定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。

示例：

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<style>
			*,
			*:after,
			*:before {
				box-sizing: border-box;
			}

			body {
				background: #F5F3F4;
				margin: 0;
				padding: 10px;
				font-family: 'Open Sans', sans-serif;
				text-align: center;
			}

			h2 {
				color: #4c4c4c;
				font-weight: 600;
				border-bottom: 1px solid #ccc;
			}

			h3,
			h5 {
				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;
			}


			.scaleX:hover .fill {
				-webkit-transform: scaleX(2);
				transform: scaleX(2);
			}

			.scaleY:hover .fill {
				-webkit-transform: scaleY(2);
				transform: scaleY(2);
			}

			.skew:hover .fill {
				-webkit-transform: skew(45deg, 45deg);
				transform: skew(45deg, 45deg);
			}

			.skewX:hover .fill {
				-webkit-transform: skewX(45deg);
				transform: skewX(45deg);
			}

			.skewY:hover .fill {
				-webkit-transform: skewY(45deg);
				transform: skewY(45deg);
			}
		</style>
	</head>
	<body>
		<h2>Css3 傾斜變換</h2>

		<!-- skew-->
		<div class="card">
			<div class="box skew">
				<div class="fill"></div>
			</div>
			<p>skew(45deg, 45deg) </p>
		</div>
		<div class="card">
			<div class="box skewX">
				<div class="fill"></div>
			</div>
			<p>skewX(45deg)</p>
		</div>
		<div class="card">
			<div class="box skewY">
				<div class="fill"></div>
			</div>
			<p>skewY(45deg)</p>
		</div>

	</body>
</html>

css3中傾斜的函數(shù)是哪個(gè)

關(guān)于“css3中傾斜的函數(shù)是哪個(gè)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手