<!DOCTYPE html>
<html lang="en">
<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>transform</title>
<style>
/*
구조 선택자는 ul li 에서는 적용된다.
블록형 박스는 부분적으로 적용(first-child, last-child 가 안됨)되는 경우가 있고 모두 적용되는 경우가 있다.
*/
* {margin:0; padding:0; box-sizing:border-box;}
div { /*공통 스타일 시트 적용*/
width:200px; height:200px; margin:100px;
border:5px solid olive;
}
div p { /*공통 스타일 시트 적용
박스가 변환되기 전 상태를 처음 상태 박스 또는 "시작 박스": transition(시작박스에서 변환된 박스 사이의 박스 상태를 만들어준다.)은 시작 박스에 적용한다.
transiton:적용할스타일속성(all:모든 스타일 속성) 전환시간(0.4s) 베지어곡선(가속도, ease-in) 대기시간(X)*/
width:100%; height:100%;
font-size:24px; font-weight:bold;
text-align:center; line-height:190px;
background:darkolivegreen; opacity:0.4; /*60% 투명*/
box-shadow:0 0 0 50px rgba(0,0,0,0.3);
transition:all 0.4s ease-in; /*전환효과 지정*/
}
div:first-child:hover p { /*개별 스타일시트 적용*/
box-shadow:0 0 0 5px rgba(0,0,0,0.8);
transform:translateX(100px);
}
div:nth-child(2):hover p {
box-shadow:0 0 0 5px rgba(0,0,0,0.8);
transform:translateY(-100px);
}
div:nth-child(3):hover p {
box-shadow:0 0 0 5px rgba(0,0,0,0.8);
transform:translate(100px, 100px); /*x축, y축을 동시에 적용*/
}
div:nth-child(4):hover p {
box-shadow:0 0 0 5px rgba(0,0,0,0.8);
transform:scaleX(2); /*0.1:10%, 0.5:50%, 1:100%, 1.5:150%, 3:300%*/
}
div:nth-child(5):hover p {
box-shadow:0 0 0 5px rgba(0,0,0,0.8);
transform:scaleY(2);
}
div:nth-child(6):hover p {
box-shadow:0 0 0 5px rgba(0,0,0,0.8);
transform:scale(2); /*박스의 너비값과 높이값에 동시 적용*/
}
div:nth-child(7):hover p {
box-shadow:0 0 0 5px rgba(0,0,0,0.8);
transform:skew(-30deg, 0); /*수평으로 비틀지 않고, 수직으로 -30도 비틀겠다.*/
}
div:nth-child(8):hover p {
box-shadow:0 0 0 5px rgba(0,0,0,0.8);
transform:rotate(360deg); /*박스를 회전시킨다.*/
}
div:nth-child(9):hover p {
box-shadow:0 0 0 5px rgba(0,0,0,0.8);
transform:translate(200px, 200px) scale(2.5) rotate(720deg) skew(-15deg); /*transform속성의 함수를 여러 개 적용*/
}
div:nth-child(10) {
position:relative;
background:sandybrown; border-radius:50%;
}
div:nth-child(10) h3, div:nth-child(10) p {
position:absolute;
}
div:nth-child(10) h3 {
padding-top:70px;
text-transform:uppercase; text-align:center;
}
div:nth-child(10) p {
background:violet; opacity:1;
border-radius:50%;
transform-origin:80% 20%;
}
div:nth-child(10):hover p {transform:rotate(-75deg);}
</style>
</head>
<body>
<div><p>translateX()</p></div>
<div><p>translateY()</p></div>
<div><p>translate()</p></div>
<div><p>scaleX()</p></div>
<div><p>scaleY()</p></div>
<div><p>scale()</p></div>
<div><p>skew()</p></div>
<div><p>rotate()</p></div>
<div><p></p></div>
<div>
<h3>transform-origin</h3>
<p>박스 기준점 변경</p>
</div>
</body>
</html>
결과
