首页 / 技术问答 / Css问答列表 / 问答详情

老虎机插槽上的 CSS 对齐问题

我在试着创造一台老虎机.但在css方面有一个问题. 我在使用1个时隙频带时没有看到这个问题，但当我try 使用3个时隙频带时，我就遇到了这个问题.

它也在旋转，同时有一个槽带.我try 了很多方法来解决这个对齐问题，但都解决不了.

对齐问题:

Problem

当我有1个时隙频段时，此为:

1 Slot Band

我的代码:

  var degree1;
  degree1 = '505deg';
  var root = document.querySelector(':root');
  root.style.setProperty('--slot1Rotate',degree1);


  var panes = document.querySelectorAll(".slot_item"),
      paneSize = 100,
      zDepth = paneSize / (2 * Math.tan(Math.PI/panes.length));

for (let index = 0; index < panes.length; index++) {
     var xAngle = 360 / panes.length * index;
    panes[index].style.transform= "rotateX("+ xAngle +"deg) translateZ("+ zDepth +"px)";
  }
var machine = document.querySelectorAll('.slot-machine');
var spinBtn = document.querySelector('#spinBtn');

for(let i=0;i<machine.length;i++){
spinBtn.addEventListener('click',function(){
  machine[i].classList.add('animation');
});

machine[i].addEventListener('animationend',function() {
  machine[i].style.transform = 'rotateX('+degree1+')';
})

}
:root{
    --slot1Rotate: 0;
  }
html, body {
  height: 100%;
  perspective: 600;
  background-color: #282a3a;
}

.machine{
    top: 25em;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.slots{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
 
}
.slot1{

}

.slot2{
  
}
.slot3{

}
.slot-machine{
  width: 120px;
  height: 120px;
  list-style: none;
  padding: 0;
  position:relative;
  transform-style: preserve-3d;
}

.animation{
  
  animation-name: x-spin;
  animation-duration: 5s;
  transition-duration: 3s;
  transition-delay: 1s;
}

.slot_item {
  height: 100px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  background: rgba(255, 255, 255, 0.832);
  backface-visibility: hidden;
}
   <div class="machine">
      <div class="slots">
        <ul class="slot-machine slot1">
          <li class="slot_item">1</li>
          <li class="slot_item">2</li>
          <li class="slot_item">3</li>
          <li class="slot_item">4</li>
          <li class="slot_item">5</li>
          <li class="slot_item">6</li>
          <li class="slot_item">7</li>
          <li class="slot_item">8</li>
          <li class="slot_item">9</li>
          <li class="slot_item">10</li>
        </ul>

        <ul class="slot-machine slot2">
          <li class="slot_item">1</li>
          <li class="slot_item">2</li>
          <li class="slot_item">3</li>
          <li class="slot_item">4</li>
          <li class="slot_item">5</li>
          <li class="slot_item">6</li>
          <li class="slot_item">7</li>
          <li class="slot_item">8</li>
          <li class="slot_item">9</li>
          <li class="slot_item">10</li>
      </ul>
      <ul class="slot-machine slot3">
        <li class="slot_item">1</li>
        <li class="slot_item">2</li>
        <li class="slot_item">3</li>
        <li class="slot_item">4</li>
        <li class="slot_item">5</li>
        <li class="slot_item">6</li>
        <li class="slot_item">7</li>
        <li class="slot_item">8</li>
        <li class="slot_item">9</li>
        <li class="slot_item">10</li>
    </ul>
      </div>
      <button id="spinBtn">Spin</button>
    </div>

推荐答案

您的错误发生是因为您的for循环中的一个

它们的增量值在rotateX();以内，
这很糟糕，因为每panes个元素中有10个元素，

and here is the problem!:
the program thinks that the 2second panes element is starting from index 10,
the third start from index 20

but in reality, we want that the second to start from 0, like the first one,
same logic for the third one.

❌ enter image description here

how I solve that?个

  • 通过删除用于循环的窗格，
  • 并插入机器内的FOR环路

因此，对于每台机器，我们都可以获得该机器的面板.

❌，因此在索引迭代之前为0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

✅Now 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9

我还重构了您的代码，使用.forEach();，现在更具可读性，也更容易更改.

/* your selectors */
let root = document.querySelector(":root");
let panes = document.querySelectorAll(".slot_item");

let spinBtn = document.querySelector("#spinBtn");
let machines = document.querySelectorAll(".slot-machine");

/* math data */
let degree1 = 310; // before was 505 (309 center correcly)
let paneSize = 100;
let zDepth = paneSize / (2 * Math.tan(Math.PI / panes.length));

root.style.setProperty("--slot1Rotate", `${degree1}deg`);

/* machines logic */
machines.forEach((thisMachine) => {
  let thisMachinePanes = thisMachine.querySelectorAll(".slot_item");

  /* button clicking logic */
  spinBtn.addEventListener("click", () => {
    thisMachine.classList.add("animation");
  });

  /* animation end logic */
  thisMachine.addEventListener("animationend", () => {
    /* for making animation run every time on click, because you can't add a class if there is the same class before */
    thisMachine.classList.remove("animation");
    thisMachine.style.transform = `rotateX(${degree1}deg)`;
  });

  /* panes logic */
  thisMachinePanes.forEach((thisPane, index) => {
    let xAngle = (360 / panes.length) * index;
    thisPane.style.transform = `rotateX(${xAngle}deg) translateZ(${zDepth}px)`;
  });
});
:root {
  --slot1Rotate: 0;
}

html,
body {
  perspective: 600;
  background-color: #282a3a;
  /* centering */
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
}

.machine {
  /* top: 25rem; don't center like this */
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.slots {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  position: relative;
}

.slot-machine {
  width: 120px;
  height: 120px;
  list-style: none;
  padding: 0;
  position: relative;
  transform-style: preserve-3d;
  /* default position (from js code) */
  transform: rotateX(var(--slot1Rotate));
}

.animation {
  animation-name: x-spin;
  animation-duration: 5s;
  transition-duration: 3s;
  transition-delay: 1s;
}

.slot_item {
  height: 100px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  background: rgba(255, 255, 255, 0.832);
  backface-visibility: hidden;
}


/* added animation keyframes */

@keyframes x-spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    /* with the variable changed by js */
    transform: rotatex(var(--slot1Rotate));
  }
}

.slot1 {}

.slot2 {}

.slot3 {}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="machine">
    <div class="slots">
      <!-- 1 -->
      <ul class="slot-machine slot1">
        <li class="slot_item">1</li>
        <li class="slot_item">2</li>
        <li class="slot_item">3</li>
        <li class="slot_item">4</li>
        <li class="slot_item">5</li>
        <li class="slot_item">6</li>
        <li class="slot_item">7</li>
        <li class="slot_item">8</li>
        <li class="slot_item">9</li>
        <li class="slot_item">10</li>
      </ul>

      <!-- 2 -->
      <ul class="slot-machine slot2">
        <li class="slot_item">1</li>
        <li class="slot_item">2</li>
        <li class="slot_item">3</li>
        <li class="slot_item">4</li>
        <li class="slot_item">5</li>
        <li class="slot_item">6</li>
        <li class="slot_item">7</li>
        <li class="slot_item">8</li>
        <li class="slot_item">9</li>
        <li class="slot_item">10</li>
      </ul>

      <!-- 3 -->
      <ul class="slot-machine slot3">
        <li class="slot_item">1</li>
        <li class="slot_item">2</li>
        <li class="slot_item">3</li>
        <li class="slot_item">4</li>
        <li class="slot_item">5</li>
        <li class="slot_item">6</li>
        <li class="slot_item">7</li>
        <li class="slot_item">8</li>
        <li class="slot_item">9</li>
        <li class="slot_item">10</li>
      </ul>
    </div>
    <button id="spinBtn">Spin</button>
  </div>

  <script src="./script.js"></script>
</body>

</html>

✅ enter image description here

有很多事情需要纠正，
但至少我解决了对齐问题

Css相关问答推荐

CSS Grid，意想不到的差距

如何在WooCommerce产品页面中减少属性下拉菜单之间的空间

在AND设计令牌上使用不同的主题

截断风景中的柔子或强制在其自己的线上，如果是肖像

将数据从react组件发送到css文件

使用 Flex 容器，如何在右对齐所有 Flex 子项的同时赋予子图像完整宽度？

测试响应式设计：手动拖动浏览器窗口与使用设备工具栏

设置初始大小并记住分配的最后大小

我可以拆分我的 CSS / SASS webpack 加载器规则，还是它们需要成为一个大规则？

Tailwind CSS： Select 单选按钮时不应用同行判断的边框

SCSS - Lighten/Darken 不编译？

清除 CSS 中已设置的填充属性以恢复 SVG 的默认值

如何在 konvajs 中居中放置项目？

内部和外部 div 之间的像素大小的间隙

我怎样才能让这个边框出现在按钮元素的上方？

CSS如何使元素淡入然后淡出？

如何使用 Gulp 复制多个文件并保持文件夹 struct

如何在 javascript 中获取 HTML 元素的样式值？

将 Fixed div 设置为父容器的 100% 宽度

CSS 边距和填充速记属性顺序的助记符

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630