반응형
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 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190623 Basic Study 56(3차원 회전 주사위) (0) | 2019.06.23 |
|---|---|
| HTML5 - 190623 Basic Study 55(Transform 3차원) (0) | 2019.06.23 |
| HTML5 - 190622 Basic Study 53(고정형 네비게이션 바) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 52(유동형 레이아웃 구조) (0) | 2019.06.22 |
| HTML5 - 190622 Basic Study 51(고정형 레이아웃 구조) (0) | 2019.06.22 |
