Lua
2017-09-05 00:12
조회: 7,466
추천: 6
3D 큐브를 만들어보자!크롬에서는 정상작동하지만 익플은 안됩니다! webkit 까지 하려니 너무 복잡해서.. ------------------------------------------------------------ ------------------------------------------------------------ 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 큐브만 만들어 보았지만 다른 모양으로도 얼마든지 만들 수 있습니다. 긴 글 읽어주셔서 감사합니다. |