Erstellen eines Zylinders in HTML 3d

Question

Ich versuche, ein Spiel Dame in HTML und JS zu bauen, und ich möchte Spielsteine ​​erstellen. Ich muss eine zylinderähnliche Form erstellen. Ich habe eine Form mit Vorder- und Rückseite und einem Abstand zwischen ihnen gemacht, aber ich weiß nicht, wie man diesen Raum "schließt". Bitte helfen =)

Mein Code: https://jsfiddle.net/46vxqj0r/1/

**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); 
} 

Answer 1

Ich habe gerade den Code auf dieser Seite http://x.dtott.com/3d/ und modifiziert es ein wenig, und hier ist es mit reinem CSS lol https://jsfiddle.net/nd3wycen/

Dies ist eine wörtliche Antwort auf Ihre Frage, jedoch würde ich Javascript verwenden, um durch jede von diesen zu iterieren, um es in viel weniger Code zu machen.

<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; 
} 

Answer 2

In Ordnung. Also das ist, was ich habe schließlich getan: 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');