<!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>
<style>
/*reset 스타일 시트*/
* {margin:0; padding:0; box-sizing:border-box;}
ul li {list-style:none;} /*항목의 블릿을 제거*/
/*공통 스타일 시트*/
ul { /*부모 요소*/
display:flex;
justify-content:space-between;
align-items:center;
width:900px; margin:30px auto;
perspective:700px; /*★원근감 지정: 700~900px*/
}
ul li {
width:200px; height:200px;
font-size:24px; color:#FFF; font-weight:bold;
text-align:center; line-height:190px;
background:rgba(10,70,10,0.6); border:5px solid #06F;
transition:all 0.4s ease-in;
}
/*개별 스타일 시트*/
/*===== rotate3d =====*/
/*첫 번째 매개변수: 1: x축을 기준으로 지정, 0: x축을 기준으로 하지 않음*/
/*두 번째 매개변수: 1: y축을 기준으로 지정, 0: y축을 기준으로 하지 않음*/
/*세 번째 매개변수: 1: z축을 기준으로 지정, 0: z축을 기준으로 하지 않음*/
/*네 번째 매개변수: 양수값을 지정하면 시계방향, 음수값을 지정하면 시계 반대 방향으로 박스를 회전시킨다.*/
ul li:first-child:hover {transform:rotate3d(1,0,0,-125deg)}
ul li:nth-child(2):hover {transform:rotate3d(0,1,0,-125deg)}
ul li:nth-child(3):hover {transform:rotate3d(0,0,1,-125deg)}
/*===== translate3d =====*/
/*양수값: 브라우저 앞으로 뛰어나온다*/
/*음수값: 브라우저 안쪽으로 들어간다.*/
ul li:last-child:hover {transform:translateZ(-500px) scale(0.1); opacity:0;}
.container {
width:300px; height:300px; margin:50px;
border:10px solid #040;
perspective:700px;
}
.box1 { /*Y축을 기준, 시계방향으로 45도 회전*/
width:100%; height:100%;
background:#3CF; border:10px solid #900;
transform:rotate3d(0,1,0,-45deg);
}
.box2 {/*X축을 기준, 시계방향으로 45도 회전*/
width:100%; height:100%;
background:#006;
transform:rotate3d(1,0,0,-125deg);
transform-origin:left top;
}
.no {transform-style:flat;}
.yes {transform-style:preserve-3d;} /*자식요소에 적용된 원근감을 손자에게 까지 전달한다.*/
</style>
</head>
<body>
<ul>
<li>rotate3d( )</li>
<li>rotate3d( )</li>
<li>rotate3d( )</li>
<li>translateZ( )</li>
</ul>
<div class="container">
<div class="box1 no">
<div class="box2"></div>
</div>
</div>
<div class="container">
<div class="box1 yes">
<div class="box2"></div>
</div>
</div>
</body>
</html>
결과
