집 >웹 프론트엔드 >프런트엔드 Q&A >CSS3의 기울기 기능은 무엇입니까

CSS3의 기울기 기능은 무엇입니까

青灯夜游원래의: 2022-06-01 20:24:232577검색

css3에는 세 가지 기울기 함수가 있습니다. 1. X축과 Y축을 따라 2D 기울기 변환을 정의하기 위해 변형 속성과 함께 사용되는 Skew() 2. X축을 따라 정의하기 위해 변형 속성과 함께 사용 2D 기울기 변환 3. Y축을 따라 2D 기울기를 정의할 수 있는 SkewY().

CSS3의 기울기 기능은 무엇입니까

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3에는 세 가지 기울이기 함수가 있습니다:

skew()
skewX()
skewY()

이 세 가지 기울이기 함수는 변환 속성과 함께 사용됩니다(속성으로 사용됨). 값) ), 요소의 기울기를 얻을 수 있습니다.

값	설명
skew(x축 각도,y축 각도)	는 X 및 Y축을 따라 2D 기울이기 변환을 정의합니다.
skewX(angle)	은 X축을 따라 2D 기울이기 변환을 정의합니다.
skewY(angle)	은 Y축을 따라 2D 기울이기 변환을 정의합니다.

예:

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<style>
			*,
			*: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;
			}


			.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>
		<h1>Css3 倾斜变换</h1>

		<!-- 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의 기울기 기능은 무엇입니까

(학습 동영상 공유: css 동영상 튜토리얼, 웹 프론트엔드)

위 내용은 CSS3의 기울기 기능은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 css css3 transform

성명：

이전 기사：HTML5에서 컨트롤은 무엇을 의미합니까?다음 기사：HTML5에서 컨트롤은 무엇을 의미합니까?