본문 바로가기

Python_WEB/HTML

HTML5 - 190623 Basic Study 54(Transform 2차원)

반응형

1. transform 2차원

translate(translateX, translateY) : 특정한 크기만큼 이동

translateX(translateX) : X축으로 특정한 크기만큼 이동

translateY(translateY) : Y축으로 특정한 크기만큼 이동

scale(scaleX, scaleY) : 특정한 크기만큼 확대 및 축소

scaleX(scaleX) : X축으로 특정한 크기만큼 확대 및 축소

scaleY(scaleY) : Y축으로 특정한 크기만큼 확대 및 축소

skew(angleX, angleY) : 특정한 각도만큼 기울임

skewX(angleX) : X축으로 특정한 각도만큼 기울임

skewY(angleY) : Y축으로 특정한 각도만큼 기울임

rotate(angleZ) : 특정한 각도만큼 회전 

 

2. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<link href="css/ex01.css" rel="stylesheet">
<link href="css/reset.css" rel="stylesheet">
</head>

<body>
<h1>transform 속성</h1>
<section>
	<div>box1</div>
</section>
</body>
</html>

 

3. CSS Code

@charset "utf-8";
/* CSS Document */

body{
	margin:30px;
}

section{
	width:100px;
	height:100px;
	border:3px solid red;
}
section div{
	width:100%;
	height:100%;
	background:pink;
}
section div:hover{
	transition:1s;
	transform:rotate(60deg);
	transform-origin:right bottom;
	              /* 100%  100% */
	transform:rotate(90deg) scale(1.2) skewY(10deg) translate(100px);
}

 

4. HTML / CSS 파일

ex01.html
0.00MB
ex01.css
0.00MB

반응형