|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
div.transform {
color:white;
width:150px;
height:150px;
}
/*transform - 요소를 특정 변형 효과를 지정*/
div.A:hover {transform:translate(50px, 50px);} /*마우스를 올리면x:50, y:50 만큼 이동*/
div.B:hover {transform:translateX(50px);} /*마우스를 올리면x:50 만큼 이동*/
div.C:hover {transform:translateY(-50px);} /*마우스를 올리면x:-50 만큼 이동*/
div.D:hover {transform:scale(0.5, 0.5);} /*마우스를 올리면 x, y 축으로 2배 축소*/
div.E:hover {transform:scaleX(2);} /*마우스를 올리면 x 축으로 2배 확대*/
div.F:hover {transform:scaleY(2);} /*마우스를 올리면 y 축으로 2배 확대*/
div.G:hover {transform:skew(-20deg, -20deg);} /*마우스를 올리면 x, y축으로 -20도 기울임*/
div.H:hover {transform:skewX(20deg);} /*마우스를 올리면 x 축으로 20도 기울임*/
div.I:hover {transform:skewY(20deg);} /*마우스를 올리면 y 축으로 20도 기울임*/
div.J:hover {transform:rotate(50deg);} /*요소의 중심으로 마우스를 올리면 50도만큼 회전*/
/*transform-origin - 요스를 외전 시킬때 회전의 중심을 변형*/
/*속성값으로 left, center, right가 있다*/
div.K:hover {transform:rotate(50deg); transform-origin:top left;} /*요소의 위쪽, 왼쪽 중심으로 마우스를 올리면 50도만큼 회전*/
div.L:hover {transform:rotate(50deg); transform-origin:200px 200px;} /*기준점을 직접 지정하므로써 기준점 밖으로도 가능하다*/
</style>
</head>
<body>
<div style="display:inline-block">
<div class="transform A" style="background-color:#ff0000">translate<br>마우스를 올리면x:50, y:50 만큼 이동</div>
<div class="transform B" style="background-color:#ff8c00">translateX<br>마우스를 올리면x:50 만큼 이동</div>
<div class="transform C" style="background-color:#eaff00">translateY<br>마우스를 올리면x:-50 만큼 이동</div>
</div>
<div style="display:inline-block">
<div class="transform D" style="background-color:#4dff00">scale<br>마우스를 올리면 x, y 축으로 2배 축소</div>
<div class="transform E" style="background-color:#00ffee">scaleX<br>마우스를 올리면 x 축으로 2배 확대</div>
<div class="transform F" style="background-color:#0400ff">scaleY<br>마우스를 올리면 y 축으로 2배 확대</div>
</div>
<div style="display:inline-block">
<div class="transform G" style="background-color:#6600ff">skew<br>마우스를 올리면 x, y축으로 -20도 기울임</div>
<div class="transform H" style="background-color:#c800ff">skewX<br>마우스를 올리면 x 축으로 20도 기울임</div>
<div class="transform I" style="background-color:#ff0073">skewY<br>마우스를 올리면 y 축으로 20도 기울임</div>
</div>
<div style="display:inline-block">
<div class="transform J" style="background-color:#006eff">rotate<br>요소의 중심으로 마우스를 올리면 50도만큼 회전</div>
<div class="transform K" style="background-color:#ffb700">transform-origin<br>요소의 위쪽, 왼쪽 중심으로 마우스를 올리면 50도만큼 회전</div>
<div class="transform L" style="background-color:#00ff0d">transform-origin<br>기준점을 직접 지정하므로써 기준점 밖으로도 가능하다</div>
</div>
</body>
</html>
|
translate
마우스를 올리면x:50, y:50 만큼 이동 translateX
마우스를 올리면x:50 만큼 이동 translateY
마우스를 올리면x:-50 만큼 이동 scale
마우스를 올리면 x, y 축으로 2배 축소 scaleX
마우스를 올리면 x 축으로 2배 확대 scaleY
마우스를 올리면 y 축으로 2배 확대 skew
마우스를 올리면 x, y축으로 -20도 기울임 skewX
마우스를 올리면 x 축으로 20도 기울임 skewY
마우스를 올리면 y 축으로 20도 기울임 rotate
요소의 중심으로 마우스를 올리면 50도만큼 회전 transform-origin
요소의 위쪽, 왼쪽 중심으로 마우스를 올리면 50도만큼 회전 transform-origin
기준점을 직접 지정하므로써 기준점 밖으로도 가능하다 |
'CSS' 카테고리의 다른 글
| CSS display:flex - flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, align-self (0) | 2023.04.06 |
|---|---|
| CSS font-family (0) | 2023.04.06 |
| CSS animation - name, duration, timing-function, delay, iteration-count, direction, fill-mode (0) | 2023.04.05 |
| CSS - transition (0) | 2023.04.04 |
| CSS - float, clear (0) | 2023.04.04 |