htmlでシリンダを作成する3d

私はHTMLとJSでチェッカーゲームを作成しようとしています。私は円柱のような形を作成する必要があります。私は前と後とそれらの間のスペースで形を作ったが、私はこのスペースを "閉じる"方法を知らない。 =）htmlでシリンダを作成する3d

私のコード助けてください： 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); 
}

出典

2016-05-12 Joe

Error404 @申し訳ありません、はい、あなたは正しいです@AdamBuchananSmith CSSの答え –

ではないという。私はこの質問もキャンバスを使いたいと思っていましたが。返信ありがとう！ –

@ジョー：私はタイトルタイトル3dを知っているが、[this]（https://jsfiddle.net/thvjoapg/）では十分ではないだろうか？ 3D空間でピースを回転させないなら、これで十分でしょう。シンプルでほとんどのブラウザでサポートされており、マークアップに不要な混乱もありません。 – Harry

を私はこれがある笑https://jsfiddle.net/nd3wycen/

をこのページhttp://x.dtott.com/3d/からコードを取り、それを少し変更し、ここでは、純粋なCSSでありますあなたの質問へのリテラルの答え、しかし、私は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

興味深い...私はdivのスタックを作成しないようにしたいと思いましたが。それはちょっと乱雑に見えます。それ以上のエレガントな方法はありませんか？：\ – Joe

@joe私たちはjavascriptを使用できますか？ –

まあ...私はhtml 3dでそれを行う方法があるかどうか知ることにもっと興味がありましたが、私はそれがjavascriptを使ってどのようにできるかを学びたいと思っています。 – Joe

よし。だから私は最終的に何をやったかのthats： 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

答えて

関連する問題