1. Transform (2차원 변형)
트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여한다.
트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다.
| 속성 값 | 설명 |
| translate(20px, 30px) | 우측으로 20px, 좌측으로 30px 이동 translateX( ), translateY( ) 따로 사용 가능 (X축 : 가로방향 / Y축 : 세로방향) |
| rotate(30deg) | 30도 회전 |
| scale(0.7, 1.3) | 가로 70% 축소, 세로 130% 확대 scaleX( ), scaleY( ) 따로 사용 가능 (X축 : 가로방향 / Y축 : 세로방향) |
| skew(30deg, 20deg) | 가로 30도, 세로 20도 찌끄러뜨림 skewX( ), skewY( ) 따로 사용 가능 (X축 : 가로방향 / Y축 : 세로방향) |
| matrix(1, -0.3, 0, 1, 0, 0) | scaleX( ), skewY( ), skewX( ), scaleY( ), translateX( ), translateY( )와 같은 순서대로 한꺼번에 적용함 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
div.box{
width: 80px; height: 80px;
line-height: 80px; text-align: center;
color: #fff; border-radius: 5px;
}
div.origin{
margin: 20px; display: inline-block;
border: 1px dashed darkgray; background: lightgray;
}
div.child{
background-color: plum; cursor: pointer;
transition: all 0.3s linear; /* Animation Effect */
}
.translate{transform: translate(20px, 30px)}
.translate:hover{transform: translate(0, 0)}
.rotate{transform: rotate(30deg)}
.rotate:hover{transform: rotate(0)}
.scale{transform: scale(0.7, 1.3)}
.scale:hover{transform: scale(1, 1)}
.skew{transform: skew(30deg, 20deg)}
.skew:hover{transform: skew(0,0)}
.complex{transform: scale(0.5) rotate(180deg)}
.complex:hover{transform: scale(1) rotate(0)}
</style>
</head>
<body>
<div class="origin box">
<div class="child box translate">translate</div>
</div>
<div class="origin box">
<div class="child box rotate">rotate</div>
</div>
<div class="origin box">
<div class="child box scale">scale</div>
</div>
<div class="origin box">
<div class="child box skew">skew</div>
</div>
<div class="origin box">
<div class="child box complex">complex</div>
</div>
</body>
</html>translate
rotate
scale
skew
complex
2. transform-origin : 요소의 기본기준점을 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform-origin</title>
<style>
div.box{
width: 150px; height: 150px;
line-height: 150px; text-align: center;
color: #fff; border-radius: 5px;
}
div.origin{
margin: 20px; display: inline-block; float: left;
border: 1px dashed darkgray; background: lightgray;
}
div.child{
background-color: palevioletred; cursor: pointer;
transition: transform 1s linear; /* Animation Effect */
}
.scale1:hover{transform-origin: 0 0; transform: scale(0.5); }
.scale2:hover{transform-origin: 50% 50%; transform: scale(0.5)}
.scale3:hover{transform-origin: 100% 100%; transform: scale(0.5)}
</style>
</head>
<body>
<div class="origin box">
<div class="child box scale1">origin: 0 0</div>
</div>
<div class="origin box">
<div class="child box scale2">origin: 50% 50%</div>
</div>
<div class="origin box">
<div class="child box scale3">origin: 100% 100%</div>
</div>
</body>
</html>origin: 0 0
origin: 50% 50%
origin: 100% 100%
댓글