css 为什么当我尝试在不同的轴上旋转时，我的卡首先在相反的方向上旋转？

6ojccjat 于 2023-02-26 发布在其他

关注(0)|答案(3)|浏览(102)

我正在做一个简单的卡片翻转器，现在我可以把卡片向上、向下、向左和向右翻转。

我可以随心所欲地上下翻转卡片，它的工作原理和预期的一样;左右侧相同

什么 * 不 * 工作：

有时不同的翻转组合并不像预期的那样工作，我不知道问题是什么

尝试一下将真正有助于说明这个问题!
我试着为每个方向创建一个类，在x轴和y轴的负方向和正方向上旋转，并在单击按钮时切换类，但我不希望在另一个轴上翻转之前必须删除变换。现在，我有了x轴和y轴上的度数值，每次单击按钮时都会添加或减去该值，以便继续翻转，但这也有问题。

- 编辑**：例如，如果我单击"向上"一次，然后单击"向左"，我希望卡片在x轴上向上翻转，然后在y轴上向左翻转。当我单击"向上"时，卡片向上翻转，但当我单击"向左"时，卡片首先向下翻转，然后我必须再次单击"向左"才能正确翻转。

let upBtn = document.getElementById("top");
let dnBtn = document.getElementById("down");
let lftBtn = document.getElementById("left");
let rtBtn = document.getElementById("right");
let card = document.querySelector(".card");

let degreesX = 0;
let degreesY = 0;

function toggleDir(dir) {
  switch (dir) {
    case "up":
      degreesX += 180;
      card.style = `transform: rotateX(${degreesX}deg)`;

      break;
    case "down":
      degreesX -= 180;
      card.style = `transform: rotateX(${degreesX}deg)`;
      break;
    case "right":
      degreesY -= 180;
      card.style = `transform: rotateY(${degreesY}deg)`;
      break;
    case "left":
      degreesY += 180;
      card.style = `transform: rotateY(${degreesY}deg)`;
      break;
    case "reset":
      card.style = `transform: rotate(0deg)`;
      break;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, hsl(189, 100%, 44%, 0.62), hsla(194, 100%, 28%, 0.62));
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 350px;
  height: 500px;
  perspective: 500px;
}

.card {
  height: 100%;
  width: 100%;
  position: relative;
  transition: transform 1500ms;
  transform-style: preserve-3d;
}

.cardUp {
  transform: rotateX(180deg);
}

.cardDown {
  transform: rotateX(-180deg);
}

.cardLeft {
  transform: rotateY(-180deg);
}

.cardRight {
  transform: rotateY(180deg);
}

.reset {
  transform: rotate(0deg);
}

.front,
.back {
  height: 100%;
  width: 100%;
  border-radius: 2rem;
  box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
  position: absolute;
  backface-visibility: hidden;
}

.front {
  background-image: url(https://source.unsplash.com/random/350x500);
}

.back {
  background-image: url(https://source.unsplash.com/random?sig=123/350x500);
  transform: rotateY(180deg);
}

<body>
  <div class="container">
    <div class="card">
      <div class="front"></div>
      <div class="back"></div>
    </div>
  </div>

  <button id="top" onclick="toggleDir('up')">top</button>
  <button id="down" onclick="toggleDir('down')">down</button>
  <button id="left" onclick="toggleDir('left')">left</button>
  <button id="right" onclick="toggleDir('right')">right</button>
  <button id="left" onclick="toggleDir('reset')">reset</button>
</body>

css

来源：https://stackoverflow.com/questions/75564484/why-does-my-card-rotate-in-the-opposite-direction-first-when-i-try-to-rotate-in

3条答案

按热度按时间

hjqgdpho1#

在您的函数toggleDir（）中未定义度，请使用度X或度Y

赞(0）回复(0）举报 2023-02-26

ttvkxqim2#

有两个原因：

每次你切换到新的方向，你以前的transform就会被新的覆盖。
您只有一个变量来跟踪两个方向的度数（x-axis & y-axis）

据此，你需要做两件事：

保留卡的transform的最新值。

例如，首先你向上翻转--〉transform: rotateX(180deg);，然后你向左翻转--expect--〉transform: rotateX(180deg) rotateY(180deg);，但是根据代码，这里我们只有transform: rotateY(180deg);。

分离2个变量degreesX和degreesY以跟踪每个方向。

您可以看到代码解决方案here。
在这段代码中，我检查了之前的transform是否已经有了方向的值，然后用新的值替换旧的值（使用regex替换），否则，就把值设置为transform。
希望这能解决你的问题！

赞(0）回复(0）举报 2023-02-26

aor9mmx13#

我已经想出了你的问题的部分解决方案，这只是一个基础，你可以在此基础上继续努力，找到更好的解决方案。
html添加了两个单独的卡CardX和CardY

<!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="index.css">
</head>
<body>
    <div class="container">
        <div class="cardY">
            <div class="front"></div>
            <div class="back"></div>
        </div>
        <div class="cardX">
            <div class="front"></div>
        <div class="back"></div>
        </div>

      
    </div>
  
    <button id="top" onclick="toggleDir('up')">up</button>
    <button id="down" onclick="toggleDir('down')">down</button>
    <button id="left" onclick="toggleDir('left')">left</button>
    <button id="right" onclick="toggleDir('right')">right</button>
    <button id="left" onclick="toggleDir('reset')">reset</button>
    
    <script src="index.js"></script>
  </body>
</html>

css已将position: absolute添加到卡中

.cardX {
    height: 100%;
    width: 100%;
    /* Made this card absolute so it floats on top of the other one */
    position: absolute; 
    transition: transform 1500ms;
    transform-style: preserve-3d; 
  }
  
  .cardY {
    height: 100%;
    width: 100%;
    /* Made this card absolute so it floats on top of the other one */
    position: absolute;
    transition: transform 1500ms;
    transform-style: preserve-3d;
  }

这与代码中的样式相同，只是位置不同
js操纵两张牌的样式以获得旋转效果

let upBtn = document.getElementById("top");
let dnBtn = document.getElementById("down");
let lftBtn = document.getElementById("left");
let rtBtn = document.getElementById("right");

// Added these two
let cardX = document.querySelector(".cardX");
let cardY = document.querySelector(".cardY");

let degreesX = 0
let degreesY = 0

function toggleDir(dir) {

  switch (dir) {
    
    case "up":
      degreesX += 180
    
      cardX.style = `transform: rotateX(${degreesX}deg)`

      //Set the other card to invisible while rotating the other
      cardY.style.opacity = 0
  
      break;
    case "down":
      degreesX -= 180;
      cardX.style = `transform: rotateX(${degreesX}deg)`;

       //Set the other card to invisible while rotating the other
      cardY.style.opacity = 0
    
      break;
    case "right":
     
      degreesY += 180;
      cardY.style = `transform: rotateY(${degreesY}deg)`

       //Set the other card to invisible while rotating the other
      cardX.style.opacity = 0
      
      break;
    case "left":
      
      degreesY -= 180;
      cardY.style = `transform: rotateY(${degreesY}deg)`

       //Set the other card to invisible while rotating the other
      cardX.style.opacity = 0

      break;

  }
}

这个解决方案的问题是图像使它可见时，两张卡互换什么我会建议你找到一种方法，添加一个新的图像对每一个旋转，这样一切都会流入对方。

赞(0）回复(0）举报 2023-02-26

我来回答

css 为什么当我尝试在不同的轴上旋转时，我的卡首先在相反的方向上旋转？

3条答案

相关问题

热门标签

最新问答