圍繞圓柱包裝圖像（或視頻!?） - Webkit CSS 3d變換

Question

目標： 圍繞圓柱包圍全景圖像/視頻並控制內部的「相機」以環視全景圖。

首先，我找不到任何圖像的例子，更不用說纏繞在圓柱體上的視頻。有人知道怎麼做嗎？

我認爲我應該罰款用鼠標或箭頭鍵控制視口的交互方面，但我不知道如何開始使用這個圓柱的東西，因爲我有點CSS變換和3D的noob webkit編碼...

愛你很久 - 非常感謝你的答案！ -Joel

Answer 1

今天我只是做了同樣的事情。今天早上我遇到了這個問題，所以想發佈一些幫助。

生成的代碼：

<div class="view-Cylinder-Background" style="width: 100%; height: 100%; position: absolute; left: 0px; right: 0px; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; -webkit-perspective: 500; "> 
    <div style="width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(1222.3099629457563px); "> 
     <div style="-webkit-transform-style: preserve-3d; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 0px; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; -webkit-transform: rotateY(-748.5000000000005deg); "> 
      <div class="view-Cylinder-Item" style="position: absolute; left: -77px; -webkit-transform: rotateY(0deg) translateZ(1195.5154099609108px) translateY(0px); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; "> 
       <div style="-webkit-transform: rotateY(180deg); "> 
        <div style="background-image: url(images/panarama.jpg); width: 153px; height: 1024px; background-position: 0px 0px; "> 
        </div> 
       </div> 
      </div> 
      <div class="view-Cylinder-Item" style="position: absolute; left: -77px; -webkit-transform: rotateY(7.2deg) translateZ(1195.5154099609108px) translateY(0px); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; "> 
       <div style="-webkit-transform: rotateY(180deg); "> 
        <div style="background-image: url(images/panarama.jpg); width: 153px; height: 1024px; background-position: 153.6px 0px; "> 
        </div> 
       </div> 
      </div> 
      <div class="view-Cylinder-Item" style="position: absolute; left: -77px; -webkit-transform: rotateY(14.4deg) translateZ(1195.5154099609108px) translateY(0px); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; "> 
       <div style="-webkit-transform: rotateY(180deg); "> 
        <div style="background-image: url(images/panarama.jpg); width: 153px; height: 1024px; background-position: 307.2px 0px; "> 
        </div> 
       </div> 
      </div> 

     </div> 
    </div> 
</div> 

外的div是汽缸本身。 3「視圖 - 圓柱 - 項目」divs是該圓柱上的面。這個特殊的例子被分成50個面（爲了簡潔起見剪切），所以每個面被旋轉7.2 degrees。的面的translateZ通過基本幾何形狀（畢達哥拉斯計算：。sqrt(radius^2 - face_width^2)半徑被計算爲imageWidth/Pi/2和在包裹的div（1222... pixels）的translateZ用於每個面也由-50%（left: -77px偏移）以將其放在正確的位置。

希望這有助於一點，我知道這是問題是老了幾個月。