在html中創建一個圓柱體3d

我想在HTML和JS中構建一個跳棋遊戲，我想創建遊戲塊。我需要創建一個圓柱狀的形狀。我做了一個正面和背面的形狀和他們之間的空間，但我不知道如何「關閉」這個空間。請幫助=）在html中創建一個圓柱體3d

**HTML** 
<div class="soldier"> 
    <div class="front"></div> 
    <div class="back"></div> 
</div> 

**CSS** 
.soldier { 
    transform: rotateY(75deg); 
    transform-style: preserve-3d; 
    width: 30px; 
    height: 30px; 
} 

.front { 
    cursor: pointer; 
    width: 30px; 
    height: 30px; 
    border-radius: 25px; 
    margin: auto; 
    background: black; 
    position: absolute; 
} 

.back { 
    cursor: pointer; 
    width: 30px; 
    height: 30px; 
    border-radius: 25px; 
    margin: auto; 
    background: black; 
    position: absolute; 
    transform: rotateY(180deg) translateZ(10px); 
}

來源

2016-05-12 Joe

@ Error404這不是一個CSS的答案 –

@AdamBuchananSmith是的，你說得對，對不起。我雖然這個問題想要使用畫布也。感謝您的回覆！ –

@Joe：我知道問題標題顯示3d，但不會[this]（https://jsfiddle.net/thvjoapg/）就足夠了嗎？我的意思是如果你不打算在3D空間中旋轉這塊，那麼這應該就足夠了。這很簡單，幾乎所有瀏覽器都支持，並且沒有不必要的標記混亂。 – Harry

我只是把代碼從http://x.dtott.com/3d/這個頁面並修改它了一下，在這裏它與純CSS笑https://jsfiddle.net/nd3wycen/

這是一個文字回答你的問題，但是我會使用JavaScript遍歷每一個這些，使其在更少的代碼。

<div id="cylinder" class="shape" style="transform: matrix3d(0.688033, -0.441566, -0.575873, 0, 0.0388043, 0.814816, -0.578419, 0, 0.724641, 0.375626, 0.577755, 0, 0, 0, 0, 1);"> 
     <div class="slice-1"></div> 
     <div class="slice-2"></div> 
     <div class="slice-3"></div> 
     <div class="slice-4"></div> 
     <div class="slice-5"></div> 
     <div class="slice-6"></div> 
     <div class="slice-7"></div> 
     <div class="slice-8"></div> 
     <div class="slice-9"></div> 
     <div class="slice-10"></div> 
     <div class="slice-11"></div> 
     <div class="slice-12"></div> 
     <div class="slice-13"></div> 
     <div class="slice-14"></div> 
     <div class="slice-15"></div> 
     <div class="slice-16"></div> 
     <div class="slice-17"></div> 
     <div class="slice-18"></div> 
     <div class="slice-19"></div> 
     <div class="slice-20"></div> 
     <div class="slice-21"></div> 
     <div class="slice-22"></div> 
     <div class="slice-23"></div> 
     <div class="slice-24"></div> 
     <div class="slice-25"></div> 
     <div class="slice-26"></div> 
     <div class="slice-27"></div> 
     <div class="slice-28"></div> 
     <div class="slice-29"></div> 
     <div class="slice-30"></div> 
     <div class="slice-31"></div> 
     <div class="slice-32"></div> 
     <div class="slice-33"></div> 
     <div class="slice-34"></div> 
     <div class="slice-35"></div> 
     <div class="slice-36"></div> 
     <div class="slice-37"></div> 
     <div class="slice-38"></div> 
     <div class="slice-39"></div> 
     <div class="slice-40"></div> 
     <div class="slice-41"></div> 
     <div class="slice-42"></div> 
     <div class="slice-43"></div> 
     <div class="slice-44"></div> 
     <div class="slice-45"></div> 
     <div class="slice-46"></div> 
     <div class="slice-47"></div> 
     <div class="slice-48"></div> 
     <div class="slice-49"></div> 
     <div class="slice-50"></div> 
     <div class="slice-51"></div> 
     <div class="slice-52"></div> 
     <div class="slice-53"></div> 
     <div class="slice-54"></div> 
     <div class="slice-55"></div> 
     <div class="slice-56"></div> 
     <div class="slice-57"></div> 
     <div class="slice-58"></div> 
     <div class="slice-59"></div> 
     <div class="slice-60"></div> 
     </div> 
    </div>

CSS

.w { 
    width: 200px; 
    height: 200px; 
    margin: 100px auto; 
    position: relative; 
    -webkit-perspective: 1000; 
    -webkit-perspective-origin: 50% 50%; 
    transform: rotate(245deg); 
} 

.shape { 
    width: 100px; 
    height: 100px; 
    position: relative; 
    margin: 50px auto; 
    -webkit-transform-style: preserve-3d; 
    cursor: move; 
} 

#cylinder { 
    position: relative; 
    -webkit-transform-origin: center center 30px; 
} 

#cylinderBack { 
    position: absolute; 
    width: 50px; 
    left: 39%; 
    top: 30px; 
    text-align: center; 
} 

#cylinder div { 
    border: 5px solid blue; 
    -webkit-border-radius: 100px; 
    height: 100px; 
    width: 100px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#cylinder .slice-1 { 
    -webkit-transform: translateZ(1px); 
    border-color: red; 
    background: red; 
} 

#cylinder .slice-2 { 
    -webkit-transform: translateZ(2px); 
} 

#cylinder .slice-3 { 
    -webkit-transform: translateZ(3px); 
} 

#cylinder .slice-4 { 
    -webkit-transform: translateZ(4px); 
} 

#cylinder .slice-5 { 
    -webkit-transform: translateZ(5px); 
} 

#cylinder .slice-6 { 
    -webkit-transform: translateZ(6px); 
} 

#cylinder .slice-7 { 
    -webkit-transform: translateZ(7px); 
} 

#cylinder .slice-8 { 
    -webkit-transform: translateZ(8px); 
} 

#cylinder .slice-9 { 
    -webkit-transform: translateZ(9px); 
} 

#cylinder .slice-10 { 
    -webkit-transform: translateZ(10px); 
} 

#cylinder .slice-11 { 
    -webkit-transform: translateZ(11px); 
} 

#cylinder .slice-12 { 
    -webkit-transform: translateZ(12px); 
} 

#cylinder .slice-13 { 
    -webkit-transform: translateZ(13px); 
} 

#cylinder .slice-14 { 
    -webkit-transform: translateZ(14px); 
} 

#cylinder .slice-15 { 
    -webkit-transform: translateZ(15px); 
} 

#cylinder .slice-16 { 
    -webkit-transform: translateZ(16px); 
} 

#cylinder .slice-17 { 
    -webkit-transform: translateZ(17px); 
} 

#cylinder .slice-18 { 
    -webkit-transform: translateZ(18px); 
} 

#cylinder .slice-19 { 
    -webkit-transform: translateZ(19px); 
} 

#cylinder .slice-20 { 
    -webkit-transform: translateZ(20px); 
} 

#cylinder .slice-21 { 
    -webkit-transform: translateZ(21px); 
} 

#cylinder .slice-22 { 
    -webkit-transform: translateZ(22px); 
} 

#cylinder .slice-23 { 
    -webkit-transform: translateZ(23px); 
} 

#cylinder .slice-24 { 
    -webkit-transform: translateZ(24px); 
} 

#cylinder .slice-25 { 
    -webkit-transform: translateZ(25px); 
} 

#cylinder .slice-26 { 
    -webkit-transform: translateZ(26px); 
} 

#cylinder .slice-27 { 
    -webkit-transform: translateZ(27px); 
} 

#cylinder .slice-28 { 
    -webkit-transform: translateZ(28px); 
} 

#cylinder .slice-29 { 
    -webkit-transform: translateZ(29px); 
} 

#cylinder .slice-30 { 
    -webkit-transform: translateZ(30px); 
} 

#cylinder .slice-31 { 
    -webkit-transform: translateZ(31px); 
} 

#cylinder .slice-32 { 
    -webkit-transform: translateZ(32px); 
} 

#cylinder .slice-33 { 
    -webkit-transform: translateZ(33px); 
} 

#cylinder .slice-34 { 
    -webkit-transform: translateZ(34px); 
} 

#cylinder .slice-35 { 
    -webkit-transform: translateZ(35px); 
} 

#cylinder .slice-36 { 
    -webkit-transform: translateZ(36px); 
} 

#cylinder .slice-37 { 
    -webkit-transform: translateZ(37px); 
} 

#cylinder .slice-38 { 
    -webkit-transform: translateZ(38px); 
} 

#cylinder .slice-39 { 
    -webkit-transform: translateZ(39px); 
} 

#cylinder .slice-40 { 
    -webkit-transform: translateZ(40px); 
} 

#cylinder .slice-41 { 
    -webkit-transform: translateZ(41px); 
} 

#cylinder .slice-42 { 
    -webkit-transform: translateZ(42px); 
} 

#cylinder .slice-43 { 
    -webkit-transform: translateZ(43px); 
} 

#cylinder .slice-44 { 
    -webkit-transform: translateZ(44px); 
} 

#cylinder .slice-45 { 
    -webkit-transform: translateZ(45px); 
} 

#cylinder .slice-46 { 
    -webkit-transform: translateZ(46px); 
} 

#cylinder .slice-47 { 
    -webkit-transform: translateZ(47px); 
} 

#cylinder .slice-48 { 
    -webkit-transform: translateZ(48px); 
} 

#cylinder .slice-49 { 
    -webkit-transform: translateZ(49px); 
} 

#cylinder .slice-50 { 
    -webkit-transform: translateZ(50px); 
} 

#cylinder .slice-51 { 
    -webkit-transform: translateZ(51px); 
} 

#cylinder .slice-52 { 
    -webkit-transform: translateZ(52px); 
} 

#cylinder .slice-53 { 
    -webkit-transform: translateZ(53px); 
} 

#cylinder .slice-54 { 
    -webkit-transform: translateZ(54px); 
} 

#cylinder .slice-55 { 
    -webkit-transform: translateZ(55px); 
} 

#cylinder .slice-56 { 
    -webkit-transform: translateZ(56px); 
} 

#cylinder .slice-57 { 
    -webkit-transform: translateZ(57px); 
} 

#cylinder .slice-58 { 
    -webkit-transform: translateZ(58px); 
} 

#cylinder .slice-59 { 
    -webkit-transform: translateZ(59px); 
} 

#cylinder .slice-60 { 
    -webkit-transform: translateZ(60px); 
    border-color: red; 
    background: red; 
}

來源

2016-05-12 23:08:04

有趣...雖然我想避免創建一堆divs。它看起來有點凌亂。沒有更優雅的方式嗎？：\ – Joe

@joe我們可以使用JavaScript嗎？ –

嗯......我更感興趣的是想知道是否有任何方法可以用html 3d做到這一點，但我很想學習如何使用javascript來完成。 – Joe

好吧。所以，這就是我所做過最終： https://jsfiddle.net/46vxqj0r/2/

**HTML** 
<div class="soldier"> 
</div> 

**CSS** 
.soldier { 
    transform: rotateX(60deg); 
    transform-style: preserve-3d; 
    width: 30px; 
    height: 30px; 
} 

.soldier > div { 
    cursor: pointer; 
    width: 30px; 
    height: 30px; 
    border-radius: 25px; 
    margin: auto; 
    background: #444; 
    position: absolute; 
} 

.head { 
    background-color: #666 !important; 
} 

.back { 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75) 
} 

**JS** 
for (i = 0; i < 12; i++) { 
    $('.soldier').append('<div class="disc-' + i + '" style="transform: translateZ(-' + i + 'px)"</div>'); 
} 

$('.disc-0').addClass('head'); 
$('.disc-11').addClass('back');

來源

2016-05-14 08:39:05 Joe

在html中創建一個圓柱體3d

回答

相關問題