부모 요소에 perspective:속성값;으로 원근감을 지정해야한다. ex) perspective:700px ( 일반적으로 700~900px 로 지정)
1. transform:rotate3D
1. x축을 기준으로 반시계방향으로 회전 : transform:rotate3d(1,0,0, -100deg); 2. y축을 기준으로 시계방향으로 회전 : transform:rotate3d(0,1,0,100deg); 3. z축을 기준으로 반시계방향으로 회전 : transform:rotate3d(0,0,1,-100deg);
<!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>트랜스폼 3D </title>
</head>
<style>
/* reset 스타일 시트 */
*{margin:0; padding:0; box-sizing: border-box;}
ul li {list-style: none;} /*항목의 불릿을 제거*/
/* 공통 스타일 시트 */
ul { /* 부모 요소 */
display:flex; /*자식 요소의 위치를 부모 위치에서 지정하겠다.*/
justify-content:space-around;
align-items:center;
width:900px; margin:30px auto; /*30px:상하, auto:좌우*/
perspective:700px; /*★★★★★원근감 지정 : 700~900px (부모 요소에 효과를 주어야함)*/
}
ul li { /*자식 요소*/
width:200px; height:200px;
font-size:24px; color:#fff; font-weight:bold;
text-align:center; text-shadow:1px 1px 1px #000; line-height:190px;
background:rgba(229,204,255,0.5); border:5px solid #C690FC;
box-shadow: 1px 1px 1px #000;
transition:all 1s ease-in;
}
/* 개별 스타일 시트 */
ul li:first-child:hover {transform:rotate3d(1,0,0,-100deg);} /*x축*/
ul li:nth-child(2):hover {transform:rotate3d(0,1,0,100deg);} /*y축*/
ul li:nth-child(3):hover {transform:rotate3d(0,0,1,-100deg);} /*y축*/
</style>
<body>
<ul>
<li>rotate3d()</li>
<li>rotate3d()</li>
<li>rotate3d()</li>
</ul>
</body>
</html>
rotate3d()원근감 지정 X
2. transform:translate3D
1. x축을 기준으로 앞으로 튀어나온다. (양수) : transform:translate(100px,0px,0px); 2. y축을 기준으로 안쪽으로 들어간다. (음수) : transform:translate(0,100px,0px); 3. z축을 기준으로 앞으로 튀어나온다. (양수) : transform:translate(0,0px,100px);
<!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>트랜스폼 3D </title>
</head>
<style>
/* reset 스타일 시트 */
*{margin:0; padding:0; box-sizing: border-box;}
ul li {list-style: none;} /*항목의 불릿을 제거*/
/* common 스타일 시트 ( : 현재 없음)*/
/* 공통 스타일 시트 */
ul { /* 부모 요소 */
display:flex; /*자식 요소의 위치를 부모 위치에서 지정하겠다.*/
justify-content:space-around;
align-items:center;
width:900px; margin:30px auto; /*30px:상하, auto:좌우*/
perspective:700px; /*★★★★★원근감 지정 : 700~900px (부모 요소에 효과를 주어야함)*/
}
ul li { /*자식 요소*/
width:200px; height:200px;
font-size:24px; color:#fff; font-weight:bold;
text-align:center; text-shadow:1px 1px 1px #000; line-height:190px;
background:rgba(229,204,255,0.5); border:5px solid #C690FC;
box-shadow: 1px 1px 1px #000;
transition:all 1s ease-in;
}
/* 개별 스타일 시트 */
/* ====== translate 3D ====== */
/* 양수값 : 브라우저 앞으로 뛰어나온다. */
/* 음수값 : 브라우저 안쪽으로 들어간다.*/
ul li:first-child:hover {transform:translate3d(100px,0px,0px);}
ul li:nth-child(2):hover {transform:translate3d(0px,100px,0px);}
ul li:nth-child(3):hover {transform:translate3d(0px,0px,100px);}
</style>
<body>
<ul>
<li>translate3d()</li>
<li>translate3d()</li>
<li>translate3d()</li>
</ul>
</body>
</html>
3. 손자 박스에 적용하기
<!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>트랜스폼 3D </title>
</head>
<style>
/* reset 스타일 시트 */
*{margin:0; padding:0; box-sizing: border-box;}
/* 공통 스타일 시트 */
ul { /* 부모 요소 */
display:flex; /*자식 요소의 위치를 부모 위치에서 지정하겠다.*/
justify-content:space-between;
align-items:center;
width:900px; margin:50px auto; /*30px:상하, auto:좌우*/
perspective:700px; /*★★★★★원근감 지정 : 700~900px (부모 요소에 효과를 주어야함)*/
}
/* 개별 스타일 시트 */
.container {
width:300px; height:300px; margin:50px;
border:10px solid #CCFFCC;
perspective:700px;
}
.box1 { /* X축을 기준으로 45도 시계방향 회전 */
width:100%; height:100%;
border:10px solid #FF9999;
transform:rotate3d(1,0,0,20deg); /*부모 요소이기 때문에 자식 요소들이 따라서 같이 적용됨*/
background:#FFCCCC;
}
.box2 { /* X축을 기준, 45도 시계방향 회전*/
width:100%; height:100%;
font-size:24px; text-align:center; line-height:300px;
background:#CCE5FF;
transform:rotate3d(1,0,0,20deg);
transform-origin:left top; /*손자 박스에 지정해줌, 박스가 이동이되는게 아닌 기준점만 바뀜*/
}
/*no, yes 는 자식 박스이다.*/
.no {transform-style:flat;}
.yes {
transform-style:preserve-3d; /*자식 요소에 적용된 원근감을 손자에게 까지 전달한다.*/
}
</style>
<body>
<ul>
<div class="container">
<div class="box1 no"> 자식 박스
<div class="box2"> 손자 적용 X </div>
</div>
</div>
<div class="container">
<div class="box1 yes"> 자식 박스
<div class="box2"> 손자 적용 O </div>
</div>
</div>
</ul>
</body>
</html>
