2014年1月2日 星期四

CSS 3D Cube


關於《扭計骰機械人》的開發,我會先證明了運算的方法,甚至是可行性後才會動手製作。機體會以 Arduino 為大腦,貪其簡單易用,主要是操作「扭」這個動作。至於要扭的步驟,擔心 Arduino 會花很多時間運算,暫時由 PC 處理。在未建構硬件之前,目前的構思是用 Javascript 代表 Arduino 做「扭」及畫面上的工作,運算則是 CentOS 端的 PHP 處理。Javascript 是比較方便的語言去讓我測試運算是否正確。待沒有問題時,便會移植到 Arduino 上。昨天研究了如何在 HTML 利用 CSS 顯示立體魔方的方法:
#cameraDiv {
 width: 400px;
 height: 160px;
 margin: 80 0 80 0px;
 -webkit-perspective: 800;
 -webkit-perspective-origin: 50% 0%;
 -moz-perspective: 800;
 -moz-perspective-origin: 50% 0%;
 -o-perspective: 800;
 -o-perspective-origin: 50% 0%;
 -ms-perspective: 800;
 -ms-perspective-origin: 50% 0%;
}
#cubeDiv {
 position: relative;
 margin: 0 auto;
 height: 160px;
 width: 160px;
 -webkit-transition: -webkit-transform 2s linear;
 -webkit-transform-style: preserve-3d;
 -moz-transition: -webkit-transform 2s linear;
 -moz-transform-style: preserve-3d;
 -o-transition: -webkit-transform 2s linear;
 -o-transform-style: preserve-3d;
 -ms-transition: -webkit-transform 2s linear;
 -ms-transform-style: preserve-3d;
}
.face {
 position: absolute;
 height: 160px;
 width: 160px;
 padding: 0px;
 background-color: rgba(0, 0, 0, 1.0);
}

#cubeDiv .one  {-webkit-transform: translateZ(80px);  -moz-transform: translateZ(80px);  -o-transform: translateZ(80px);  -ms-transform: translateZ(80px);}
#cubeDiv .two  {-webkit-transform: translateY(80px) rotateX(270deg);  -moz-transform: translateY(80px) rotateX(270deg);  -o-transform: translateY(80px) rotateX(270deg);  -ms-transform: translateY(80px) rotateX(270deg);}
#cubeDiv .three  {-webkit-transform: translateZ(-80px) rotateX(180deg);  -moz-transform: translateZ(-80px) rotateX(180deg);  -o-transform: translateZ(-80px) rotateX(180deg);  -ms-transform: translateZ(-80px) rotateX(180deg);}
#cubeDiv .four  {-webkit-transform: translateY(-80px) rotateX(90deg);  -moz-transform: translateY(-80px) rotateX(90deg);  -o-transform: translateY(-80px) rotateX(90deg);  -ms-transform: translateY(-80px) rotateX(90deg);}
#cubeDiv .five  {-webkit-transform: translateX(-80px) rotateX(270deg) rotateY(270deg);  -moz-transform: translateX(-80px) rotateX(270deg) rotateY(270deg);  -o-transform: translateX(-80px) rotateX(270deg) rotateY(270deg);  -ms-transform: translateX(-80px) rotateX(270deg) rotateY(270deg);}
#cubeDiv .six  {-webkit-transform: translateX(80px) rotateX(270deg) rotateY(90deg);  -moz-transform: translateX(80px) rotateX(270deg) rotateY(90deg);  -o-transform: translateX(80px) rotateX(270deg) rotateY(90deg);  -ms-transform: translateX(80px) rotateX(270deg) rotateY(90deg);}

.animate  {
 -webkit-animation: rotatingAnimation 10s infinite linear;
 -moz-animation: rotatingAnimation 10s infinite linear;
 -o-animation: rotatingAnimation 10s infinite linear;
 -ms-animation: rotatingAnimation 10s infinite linear;
 animation: rotatingAnimation 10s infinite linear;
}
@-moz-keyframes rotatingAnimation  {
 from  {-moz-transform: rotateX(0deg) rotateY(-22.5deg);}
 to  {-moz-transform: rotateX(360deg) rotateY(-22.5deg);}
}
@-webkit-keyframes rotatingAnimation {
 from  {-webkit-transform: rotateX(0deg) rotateY(-22.5deg);}
 to  {-webkit-transform: rotateX(360deg) rotateY(-22.5deg);}
}
@-o-keyframes rotatingAnimation {
 from  {-o-transform: rotateX(0deg) rotateY(-22.5deg);}
 to  {-o-transform: rotateX(360deg) rotateY(-22.5deg);}
}
@-ms-keyframes rotatingAnimation {
 from  {-ms-transform: rotateX(0deg) rotateY(-22.5deg);}
 to  {-ms-transform: rotateX(360deg) rotateY(-22.5deg);}
}
@keyframes rotatingAnimation {
 from  {transform: rotateX(0deg) rotateY(-22.5deg);}
 to  {transform: rotateX(360deg) rotateY(-22.5deg);}
}
HTML 代碼:
<div id="cameraDiv">
 <div id="cubeDiv" class="animate">
  <div id="face01Div" class="face one"><table border="0"><tr><td class="inputDivR">0</td><td class="inputDivR">1</td><td class="inputDivR">2</td></tr><tr><td class="inputDivR">3</td><td class="inputDivR">4</td><td class="inputDivR">5</td></tr><tr><td class="inputDivR">6</td><td class="inputDivR">7</td><td class="inputDivR">8</td></tr></table></div>
  <div id="face02Div" class="face two"><table border="0"><tr><td class="inputDivW">0</td><td class="inputDivW">1</td><td class="inputDivW">2</td></tr><tr><td class="inputDivW">3</td><td class="inputDivW">4</td><td class="inputDivW">5</td></tr><tr><td class="inputDivW">6</td><td class="inputDivW">7</td><td class="inputDivW">8</td></tr></table></div>
  <div id="face03Div" class="face three"><table border="0"><tr><td class="inputDivO">0</td><td class="inputDivO">1</td><td class="inputDivO">2</td></tr><tr><td class="inputDivO">3</td><td class="inputDivO">4</td><td class="inputDivO">5</td></tr><tr><td class="inputDivO">6</td><td class="inputDivO">7</td><td class="inputDivO">8</td></tr></table></div>
  <div id="face04Div" class="face four"><table border="0"><tr><td class="inputDivY">0</td><td class="inputDivY">1</td><td class="inputDivY">2</td></tr><tr><td class="inputDivY">3</td><td class="inputDivY">4</td><td class="inputDivY">5</td></tr><tr><td class="inputDivY">6</td><td class="inputDivY">7</td><td class="inputDivY">8</td></tr></table></div>
  <div id="face05Div" class="face five"><table border="0"><tr><td class="inputDivB">0</td><td class="inputDivB">1</td><td class="inputDivB">2</td></tr><tr><td class="inputDivB">3</td><td class="inputDivB">4</td><td class="inputDivB">5</td></tr><tr><td class="inputDivB">6</td><td class="inputDivB">7</td><td class="inputDivB">8</td></tr></table></div>
  <div id="face06Div" class="face six"><table border="0"><tr><td class="inputDivG">0</td><td class="inputDivG">1</td><td class="inputDivG">2</td></tr><tr><td class="inputDivG">3</td><td class="inputDivG">4</td><td class="inputDivG">5</td></tr><tr><td class="inputDivG">6</td><td class="inputDivG">7</td><td class="inputDivG">8</td></tr></table></div>
 </div>
</div>

沒有留言: