※ transform 속성의 의미 : css코드로 요소를 변형하는 속성이다.
| 속성 | 속성값 | 속성값사용 | 설명 |
| transform | translate | translate(50px,40px) | x,y 축으로 위치 이동 |
| translateZ | translateZ(-300px) | z축으로 위치 이동, 원근감이 생기므로 부모요소에 perspective와 함께 작성 | |
| rotate | rotate(-30deg) | 시계방향(+), 반시계방향(-)으로 회전 | |
| scaleX | scaleX(1.5) | 가로축의 비율 | |
| scaleY | scaleY(0.7) | 세로축의 비율 | |
| skewX | skewX(-30deg) | X축으로 기울기 | |
| skewY | skewY(-15deg) | Y축으로 기울기 | |
| matrix | matrix(.4,1,0,1,20,40) | scaleX, scaleY, skewX, skewY, translateX, translateY 순서대로 값을 넣는다. |
|
| transform-style | preserve-3d | 원근감을 보여주고 싶을때 자신에게 사용하는 속성 |
|
| perspective | px값 | 400px | 원근감을 보여주고 싶을때 부모요소에 사용하는 속성 |
| transform-origin | 위치지정 | right bottom | 위치속성, 값 으로 표현 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
div{
width:300px;
height: 300px;
border: 1px solid #aaa;
margin:50px;
float: left;
}
p{
width:300px;
height: 300px;
line-height: 300px;
background:rgba(71,139,184,.4);
margin:0;
font-size:3.0em;
font-weight:bold;
color:#555;
text-align: center;
}
.box1>p{transform: translate(50px,40px);}
.box2>p{transform:rotate(-30deg);}
.box3>p{transform:scaleX(1.5);}
.box4>p{transform:scaleY(0.7);}
.box5>p{transform:skewX(-30deg);}
.box6>p{transform:skewY(-15deg);}
.box7>p{transform:matrix(.4,1,0,1,20,40);}
.box8>p{transform:rotate(45deg); transform-origin:right bottom;}
.box9>p.box9a, .box9>p.box9b{
position: absolute;
transform:rotateY(60deg);
transform-style:preserve-3d;
transition:transform 1s;
}
.box9{perspective:400px;}
.box9:hover p.box9a, .box9:hover p.box9b{transform:rotateY(0deg);}
.box9>p.box9b{transform:rotateY(-60deg);}
.box10>p.box10a{
position: absolute;
transform:rotateY(60deg);
transform-style:preserve-3d;
background: #45076e;
transition:all 1s;
}
.box10{perspective:1600px;}
.box10:hover p.box10a{transform:rotateY(-60deg); background: #fef;}
.tanslateZ{
width:600px;
height:400px;
border: 1px solid #333;
margin:400px;
position: relative;
perspective:1600px;
}
.tanslateZ p{
width:100%;
height:100%;
background: rgba(0,0,255,.3);
position: absolute;
top:0;
left:0;
}
.tanslateZ p:nth-child(1){
transform:translateZ(-300px);
}
.tanslateZ p:nth-child(2){
transform:translateZ(0px);
}
.tanslateZ p:nth-child(3){
transform:translateZ(300px);
}
</style>
</head>
<body>
<div class="box1"><p>box1</p></div>
<div class="box2"><p>box2</p></div>
<div class="box3"><p>box3</p></div>
<div class="box4"><p>box4</p></div>
<div class="box5"><p>box5</p></div>
<div class="box6"><p>box6</p></div>
<div class="box7"><p>box7</p></div>
<div class="box8"><p>box8</p></div>
<div class="box9">
<p class="box9a">box9a</p>
<p class="box9b">box9b</p>
</div>
<div class="box10">
<p class="box10a">box10</p>
</div>
<div class="tanslateZ">
<p>tanslateZ</p>
<p>tanslateZ</p>
<p>tanslateZ</p>
</div>
</body>
</html>
※ transition 속성의 의미 : 특정 속성이 변하는 과정을 서서히 보여준다.
| 속성 | 속성값 | 설명 |
| transition | 속성명(width 등), 시간(s) | 정해진 시간동안 지정한 속성이 서서히 변하게 함 |
| all 시간(s) | 정해진 시간동안 여러 속성을 한꺼번에 서서히 변하게 함 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style>
.box{
width: 300px;
height: 300px;
line-height: 300px;
background: #a5cbe0
font-size: 2.0em;
text-align: center;
transition: all 2s ease-in-out;
}
.box:hover{
background: #44c810;
width:600px;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">box</div>
</body>
</html>
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| 가시속성을 활용한 서브메뉴 (0) | 2021.01.29 |
|---|---|
| 가시속성 (0) | 2021.01.29 |
| ankor link 2 - 외부 문서 내 특정위치로 이동 (0) | 2021.01.29 |
| anchor link 1 - 문서 내 이동 (0) | 2021.01.29 |
| html5를 활용한 기초 레이아웃 (0) | 2021.01.29 |
