[기타] 3D 큐브를 만들어보자!

크롬에서는 정상작동하지만 익플은 안됩니다!

webkit 까지 하려니 너무 복잡해서..

완성된 3D 큐브. 마우스를 갖다대면 회전한다.

------------------------------------------------------------

------------------------------------------------------------

CSS 공부해보다가 인장에 써먹을 수 있을거 같아서 가져와봤습니다.

과정을 하나하나 설명했기 때문에, 결과만 필요하신 분들은 쭉 내려서 최종 결과부터 보시면 됩니다.

우선 주요 코드 몇개를 미리 설명하겠습니다.

transform:rotateX(90deg)

객체를 X축을 기준으로 90도 회전시킵니다.

transform:rotateY(90deg)

객체를 Y축을 기준으로 90도 회전시킵니다.

transform:translate3d(10px,20px,30px)

객체를 X축으로 10px, Y축으로 20px, Z축으로 30px 이동시킵니다.

transform:rotateX(90deg) translate3d(10px,20px,30px)

위의 두가지 transform을 동시에 행할 때 띄어쓰기만 쓰면 됩니다.

perspective:300px

3D 객체와 시점의 거리를 300px로 설정합니다. 선언하지 않으면 원근감이 느껴지지 않으며 기본값은 아마 무한대입니다.

transform-style:preserve-3d

객체를 transform 할 때 3D 형태로 transform 합니다.

-----------------------------------------------------------

큐브를 만드려면

1. 큐브의 여섯 면과

2. 그 여섯 면으로 구성된 큐브

3. 그리고 큐브가 있는 공간

이 필요합니다.

참고로 X,Y,Z 축이 이모양입니다..

이제 한변의 길이가 100px인 큐브를 만들어보기에 앞서

가시성을 위해 큐브가 있는 공간부터 만들겠습니다.

큐브를 중심에 위치하게 하기 위해 <center>를 사용했고, 100px의 공백을 설정했습니다.

시점 거리는 300px로 설정했습니다.

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd"></center>

-----------------------------------------------------------

-----------------------------------------------------------

이제 큐브의 여섯 면을 만들겠습니다.

순서대로 큐브의 정면, 후면, 오른쪽면, 왼쪽면, 윗면, 아랫면  입니다.

가시성을 위해 투명도를 0.7로 설정하겠습니다.

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd">

<div style="opacity:0.7;width:100;height:100;background-color:#ff0000"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#00ff00"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#0000ff"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#ffff00"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#00ffff"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#ff00ff"></div>

</center>

-----------------------------------------------------------

-----------------------------------------------------------

정면 중심의 위치 : (0,0,50)

정면은 회전시킬 필요가 없으므로, 중심으로부터 50px만 옮겨주면 됩니다.

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd">

<div style="transform:rotateX(0deg) translate3d(0px,0px,50px);opacity:0.7;width:100;height:100;background-color:#ff0000"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#00ff00"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#0000ff"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#ffff00"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#00ffff"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#ff00ff"></div>

</center>

-----------------------------------------------------------

-----------------------------------------------------------

이제부터 골때리는 점이 두개가 한번에 겹칩니다.

우선 인벤은 position:absolute (객체의 절대위치) 를 허용하지 않기 때문에

position:relative (객체의 상대위치) 를 사용해야 합니다.

즉 두번째 면은 Y축을 -100px, 세번째 면은 -200px, 네번째 면은 -300px~~~를 이동시켜야

객체가 겹쳐진 위치에 존재할 수 있습니다. 

두번째로, 객체를 회전시키면 객체의 X,Y,Z 축 또한 회전됩니다..

즉 경우에 따라서 Y축으로 +100px를, 혹은 Z축으로 이동시켜야 객체를 겹치게 할 수 있습니다.

따라서 후면의 중심을 (0,0,-50) 에 보내려고 한다면

X축으로 180도 회전시킨 후 Y축으로 +100px, Z축으로 +50px 만큼 이동시키면 됩니다.

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd">

<div style="transform:rotateX(0deg) translate3d(0px,0px,50px);opacity:0.7;width:100;height:100;background-color:#ff0000"></div>

<div style="transform:rotateX(180deg) translate3d(0px,100px,50px);opacity:0.7;width:100;height:100;background-color:#00ff00"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#0000ff"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#ffff00"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#00ffff"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#ff00ff"></div>

</center>

-----------------------------------------------------------

-----------------------------------------------------------

오른쪽면의 중심을 (50,0,0) 에 보내려면

Y축 기준으로 +90도 회전시킨 후 Y축으로 -200px, Z축으로 50px 이동시키면 됩니다.

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd">

<div style="transform:rotateX(0deg) translate3d(0px,0px,50px);opacity:0.7;width:100;height:100;background-color:#ff0000"></div>

<div style="transform:rotateX(180deg) translate3d(0px,100px,50px);opacity:0.7;width:100;height:100;background-color:#00ff00"></div>

<div style="transform:rotateY(90deg) translate3d(0px,-200px,50px);opacity:0.7;width:100;height:100;background-color:#0000ff"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#ffff00"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#00ffff"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#ff00ff"></div>

</center>

-----------------------------------------------------------

-----------------------------------------------------------

왼쪽면의 중심을 (-50,0,0) 에 보내려면

Y축 기준으로 -90도 회전시키고 Y축으로 -300px, Z축으로 50px 이동시키면 됩니다.

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd">

<div style="transform:rotateX(0deg) translate3d(0px,0px,50px);opacity:0.7;width:100;height:100;background-color:#ff0000"></div>

<div style="transform:rotateX(180deg) translate3d(0px,100px,50px);opacity:0.7;width:100;height:100;background-color:#00ff00"></div>

<div style="transform:rotateY(90deg) translate3d(0px,-200px,50px);opacity:0.7;width:100;height:100;background-color:#0000ff"></div>

<div style="transform:rotateY(-90deg) translate3d(0px,-300px,50px);opacity:0.7;width:100;height:100;background-color:#ffff00"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#00ffff"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#ff00ff"></div>

</center>

-----------------------------------------------------------

-----------------------------------------------------------

윗면의 중심을 (0,-50,0) 으로 보내려면

X축으로 90도 회전시킨 후 Z축으로 450px 이동시키면 됩니다. (400 + 50px)

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd">

<div style="transform:rotateX(0deg) translate3d(0px,0px,50px);opacity:0.7;width:100;height:100;background-color:#ff0000"></div>

<div style="transform:rotateX(180deg) translate3d(0px,100px,50px);opacity:0.7;width:100;height:100;background-color:#00ff00"></div>

<div style="transform:rotateY(90deg) translate3d(0px,-200px,50px);opacity:0.7;width:100;height:100;background-color:#0000ff"></div>

<div style="transform:rotateY(-90deg) translate3d(0px,-300px,50px);opacity:0.7;width:100;height:100;background-color:#ffff00"></div>

<div style="transform:rotateX(90deg) translate3d(0px,0px,450px);opacity:0.7;width:100;height:100;background-color:#00ffff"></div>

<div style="opacity:0.7;width:100;height:100;background-color:#ff00ff"></div>

</center>

-----------------------------------------------------------

-----------------------------------------------------------

마지막으로 아랫면을 (0,50,0) 로 이동시키려면

X축으로 -90도 회전시키고 Z축으로 -450px 이동시키면 됩니다. (-500 + 50px)

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd">

<div style="transform:rotateX(0deg) translate3d(0px,0px,50px);opacity:0.7;width:100;height:100;background-color:#ff0000"></div>

<div style="transform:rotateX(180deg) translate3d(0px,100px,50px);opacity:0.7;width:100;height:100;background-color:#00ff00"></div>

<div style="transform:rotateY(90deg) translate3d(0px,-200px,50px);opacity:0.7;width:100;height:100;background-color:#0000ff"></div>

<div style="transform:rotateY(-90deg) translate3d(0px,-300px,50px);opacity:0.7;width:100;height:100;background-color:#ffff00"></div>

<div style="transform:rotateX(90deg) translate3d(0px,0px,450px);opacity:0.7;width:100;height:100;background-color:#00ffff"></div>

<div style="transform:rotateX(-90deg) translate3d(0px,0px,-450px);opacity:0.7;width:100;height:100;background-color:#ff00ff"></div>

</center>

-----------------------------------------------------------

-----------------------------------------------------------

이제 큐브 자체는 완성이 되었지만, 3D로 인식되지 않았다 보니 영 3D같아보이지 않죠.

이제 여섯개의 면을 묶은 "cube" 객체를 만들고 transform-style:preserve-3d 를 선언해서

3D화 시킵니다.

최종결과

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd">

<div data-inven-id="cube" style="width:100px;height:100px;transform-style:preserve-3d;">

<div style="transform:rotateX(0deg) translate3d(0px,0px,50px);opacity:0.7;width:100;height:100;background-color:#ff0000"></div>

<div style="transform:rotateX(180deg) translate3d(0px,100px,50px);opacity:0.7;width:100;height:100;background-color:#00ff00"></div>

<div style="transform:rotateY(90deg) translate3d(0px,-200px,50px);opacity:0.7;width:100;height:100;background-color:#0000ff"></div>

<div style="transform:rotateY(-90deg) translate3d(0px,-300px,50px);opacity:0.7;width:100;height:100;background-color:#ffff00"></div>

<div style="transform:rotateX(90deg) translate3d(0px,0px,450px);opacity:0.7;width:100;height:100;background-color:#00ffff"></div>

<div style="transform:rotateX(-90deg) translate3d(0px,0px,-450px);opacity:0.7;width:100;height:100;background-color:#ff00ff"></div>

</div>

</center>

-----------------------------------------------------------

-----------------------------------------------------------

짜잔! 완성입니다.

이제 큐브를 이동하거나 회전시킬 때 "cube" 에서만 코드를 입력해도 됩니다.

예를 들어 위치를 이동하거나

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd">

<div data-inven-id="cube" style="width:100px;height:100px;transform-style:preserve-3d;transform:translate3d(100px,-30px,0px)">

<div style="transform:rotateX(0deg) translate3d(0px,0px,50px);opacity:0.7;width:100;height:100;background-color:#ff0000"></div>

<div style="transform:rotateX(180deg) translate3d(0px,100px,50px);opacity:0.7;width:100;height:100;background-color:#00ff00"></div>

<div style="transform:rotateY(90deg) translate3d(0px,-200px,50px);opacity:0.7;width:100;height:100;background-color:#0000ff"></div>

<div style="transform:rotateY(-90deg) translate3d(0px,-300px,50px);opacity:0.7;width:100;height:100;background-color:#ffff00"></div>

<div style="transform:rotateX(90deg) translate3d(0px,0px,450px);opacity:0.7;width:100;height:100;background-color:#00ffff"></div>

<div style="transform:rotateX(-90deg) translate3d(0px,0px,-450px);opacity:0.7;width:100;height:100;background-color:#ff00ff"></div>

</div>

</center>

-----------------------------------------------------------

-----------------------------------------------------------

아래처럼 회전시켜두거나

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd">

<div data-inven-id="cube" style="width:100px;height:100px;transform-style:preserve-3d;transform:rotate3d(0.3,0.5,0.4,175deg)">

<div style="transform:rotateX(0deg) translate3d(0px,0px,50px);opacity:0.7;width:100;height:100;background-color:#ff0000"></div>

<div style="transform:rotateX(180deg) translate3d(0px,100px,50px);opacity:0.7;width:100;height:100;background-color:#00ff00"></div>

<div style="transform:rotateY(90deg) translate3d(0px,-200px,50px);opacity:0.7;width:100;height:100;background-color:#0000ff"></div>

<div style="transform:rotateY(-90deg) translate3d(0px,-300px,50px);opacity:0.7;width:100;height:100;background-color:#ffff00"></div>

<div style="transform:rotateX(90deg) translate3d(0px,0px,450px);opacity:0.7;width:100;height:100;background-color:#00ffff"></div>

<div style="transform:rotateX(-90deg) translate3d(0px,0px,-450px);opacity:0.7;width:100;height:100;background-color:#ff00ff"></div>

</div>

</center>

-----------------------------------------------------------

-----------------------------------------------------------

클릭하면 회전하는 버튼을 만든다던가 할 수 있습니다.

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd">

<div data-inven-id="cube1" style="width:100px;height:100px;transform-style:preserve-3d;transition:1.5s">

<div style="transform:rotateX(0deg) translate3d(0px,0px,50px);opacity:0.7;width:100;height:100;background-color:#ff0000"></div>

<div style="transform:rotateX(180deg) translate3d(0px,100px,50px);opacity:0.7;width:100;height:100;background-color:#00ff00"></div>

<div style="transform:rotateY(90deg) translate3d(0px,-200px,50px);opacity:0.7;width:100;height:100;background-color:#0000ff"></div>

<div style="transform:rotateY(-90deg) translate3d(0px,-300px,50px);opacity:0.7;width:100;height:100;background-color:#ffff00"></div>

<div style="transform:rotateX(90deg) translate3d(0px,0px,450px);opacity:0.7;width:100;height:100;background-color:#00ffff"></div>

<div style="transform:rotateX(-90deg) translate3d(0px,0px,-450px);opacity:0.7;width:100;height:100;background-color:#ff00ff"></div>

</div>

</center>

<a href="#" data-inven-click-css="{'cube1':[{'transform':'rotate3d(0.3,0.7,0.5,360deg)'},{'transform':'rotate3d(0,0,0,0deg)'}]}">한바퀴 회전</a><br>

<a href="#" data-inven-click-css="{'cube1':[{'transform':'rotate3d(0,1,0,7200deg)'},{'transform':'rotate3d(0,0,0,0deg)'}]}">빙그르르르</a><br>

<a href="#" data-inven-click-css="{'cube1':[{'transform':'translate3d(-100px,0px,0px)'},{'transform':'translate3d(100px,0px,0px)'},{'transform':'translate3d(0px,0px,0px)'}]}">좌 우로 이동</a>

-----------------------------------------------------------

한바퀴 회전
빙그르르르
좌 우로 이동

-----------------------------------------------------------

다만 "버튼을 한번 클릭할 때 마다 몇도씩 회전" 혹은 "이동시킨 객체를 회전"같은건 구현하기 힘들 듯(가능은 함)

마지막으로 큐브의 각 면 안에 글이나 사진을 집어넣을 수도 있습니다.

-----------------------------------------------------------

<center style="padding-top:100px;width:450px;height:200px;perspective:300px;background-color:#dddddd">

<div data-inven-id="cube2" style="width:100px;height:100px;transform-style:preserve-3d;transition:1.5s">

<div style="transform:rotateX(0deg) translate3d(0px,0px,50px);opacity:0.7;width:100;height:100;background-color:#ff0000">가나다라마바</div>

<div style="transform:rotateX(180deg) translate3d(0px,100px,50px);opacity:0.7;width:100;height:100;background-color:#00ff00"><img src="https://upload2.inven.co.kr/upload/2017/08/22/bbs/i16631405531.jpg"></div>

<div style="transform:rotateY(90deg) translate3d(0px,-200px,50px);opacity:0.7;width:100;height:100;background-color:#0000ff"></div>

<div style="transform:rotateY(-90deg) translate3d(0px,-300px,50px);opacity:0.7;width:100;height:100;background-color:#ffff00"></div>

<div style="transform:rotateX(90deg) translate3d(0px,0px,450px);opacity:0.7;width:100;height:100;background-color:#00ffff"></div>

<div style="transform:rotateX(-90deg) translate3d(0px,0px,-450px);opacity:0.7;width:100;height:100;background-color:#ff00ff"></div>

</div>

</center>

<a href="#" data-inven-click-css="{'cube2':[{'transform':'rotate3d(1,0,0,180deg)'},{'transform':'rotate3d(0,0,0,0deg)'}]}">반바퀴 회전</a><br>

-----------------------------------------------------------

가나다라마바

반바퀴 회전

-----------------------------------------------------------

이 글에선 간단하게 3D 큐브만 만들어 보았지만 다른 모양으로도 얼마든지 만들 수 있습니다.

긴 글 읽어주셔서 감사합니다.