Transform
Element에 동적인 변화효과를 부여함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
border: 1px solid black;
width: 100px;
height: 100px;
transition-duration: 2s;
line-height: 100px;
text-align: center;
}
.box1:hover{
transform: translate(50%, 50px);
}
.box2:hover{
transform: rotate(-720deg);
border-radius: 50px;
}
.box3:hover{
transform: scale(0.5,5);
}
.box4:hover{
/* transform: rotateX(90deg);*/
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div class="box box1">Text</div>
<div class="box box2">Text</div>
<div class="box box3">Text</div>
<div class="box box4">Text</div>
</body>
</html>수직정렬
1) line-height : 텍스트가 1줄인경우
2) transform: translate(50%, 50px) : transform이 적용되는 Element의 크기 기준 %
'디지털 컨버전스 > HTML&CSS' 카테고리의 다른 글
| [CSS] 예제 (z-index , transform) - 위로 오는 사진 (0) | 2020.04.07 |
|---|---|
| [CSS] 수직 정렬 - transform:translate() (0) | 2020.04.07 |
| [CSS] 예제 (z-index , position) - 겹친사진, 사이드바 (0) | 2020.04.07 |
| [CSS] Positioning - position: fixed (0) | 2020.04.07 |
| [CSS] z-index (0) | 2020.04.07 |