gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 10:16:39 26 4
gpt4 key购买 nike

我正在尝试用 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);
}

最佳答案

我刚刚从这个页面中获取了代码 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;
}

关于html - 在 html 3d 中创建一个圆柱体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37198642/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com