在html 3d中创建一个圆柱体

Question

我正在尝试用HTML和JS构建一个跳棋游戏，我想创建游戏片段。我需要创建一个圆柱状的形状。 我做了一个正面和背面的形状和它们之间的空间，但我不知道如何“关闭”这个空间。请帮忙=）

我的代码： 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

我刚刚从这个页面http://x.dtott.com/3d/获取了代码并对其进行了一些修改，这里是纯粹的css lol 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;
}

Answer 2

好的。这就是我最终做的事情： 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');