CSS：尝试在没有垂直平移的情况下旋转门答案

【问题标题】：CSS: Trying to rotate door without vertical translationCSS：尝试在没有垂直平移的情况下旋转门
【发布时间】：2021-01-11 17:14:37
【问题描述】：

我对 CSS 相当陌生，我正在尝试学习如何旋转门。当我点击它时，门可以很好地旋转，但它看起来也像是从铰链上脱落的（垂直平移）！请问有办法改正吗？

感谢您的意见！

d3.select("#chart")
  .append("image")
  .attr("xlink:href", "https://i.stack.imgur.com/R0sAO.jpg")
  .attr("x", 12)
  .attr("y", 30)
  .attr("width", "5.5em")
  .attr("height", "5.5em");

d3.select("#chart")
  .append("image")
  .attr("xlink:href", "https://i.stack.imgur.com/ox20F.jpg")
  .attr("id", "door")
  .attr("x", 27)
  .attr("y", 40)
  .attr("width", "58")
  .attr("height", "78");


$("#door").mousedown(function() {
  $("#door").addClass("doorOpened");
});

.doorOpened {
  animation: spin 0.7s;
  animation-fill-mode: forwards;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(60deg);
    transform: skewY(20deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Revolving door</title>
</head>

<body>
  <svg id="chart"></svg>
</body>

</html>

【问题讨论】：

转换必须全部在一行，否则最后一个是唯一使用的。但是，在这种情况下，最好了解 3d 变换 - 它们会为您“倾斜”，您可以设置视角 - 即用户相对于门站立的位置。

标签： html jquery css css-animations

【解决方案1】：

您可以尝试将您的 CSS 替换为以下内容：

.doorOpened {
    animation: spin 0.7s;
    animation-fill-mode: forwards;
    transform-style: preserve-3d;
    transform-origin: 27px 50%;
}

@keyframes spin {
    0% {
        transform: perspective(1000px) rotateY(0deg) skewY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(50deg) skewY(20deg);
    }
}

JSbin

或片段：

d3.select("#chart")
  .append("image")
  .attr("xlink:href", "https://i.stack.imgur.com/R0sAO.jpg")
  .attr("x", 12)
  .attr("y", 30)
  .attr("width", "5.5em")
  .attr("height", "5.5em");

d3.select("#chart")
  .append("image")
  .attr("xlink:href", "https://i.stack.imgur.com/ox20F.jpg")
  .attr("id", "door")
  .attr("x", 27)
  .attr("y", 40)
  .attr("width", "58")
  .attr("height", "78");


$("#door").mousedown(function() {
    $("#door").addClass("doorOpened") 
});

.doorOpened {
  animation: spin 0.7s;
  animation-fill-mode: forwards;
  transform-style: preserve-3d;
  transform-origin: 27px 50%;
}
@keyframes spin {
  0% {
      transform: perspective(1000px) rotateY(0deg) skewY(0deg);
  }
  100% {
      transform: perspective(1000px) rotateY(50deg) skewY(20deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Revolving door</title>
</head>

<body>
  <svg id="chart"></svg>
</body>

</html>

【讨论】：

非常感谢您的帮助！

【解决方案2】：

d3.select("#chart")
  .append("image")
  .attr("xlink:href", "https://i.stack.imgur.com/R0sAO.jpg")
  .attr("x", 12)
  .attr("y", 30)
  .attr("width", "5.5em")
  .attr("height", "5.5em");

d3.select("#chart")
  .append("image")
  .attr("xlink:href", "https://i.stack.imgur.com/ox20F.jpg")
  .attr("id", "door")
  .attr("x", 27)
  .attr("y", 40)
  .attr("width", "58")
  .attr("height", "78");


$("#door").mousedown(function() {
  $("#door").addClass("doorOpened");
});

.doorOpened {
  animation: spin 0.7s;
  animation-fill-mode: forwards;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: translateX(18px) rotateY(80deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Revolving door</title>
</head>

<body>
  <svg id="chart"></svg>
</body>

</html>

【讨论】：

感谢您抽出宝贵时间回答！

【解决方案3】：

首先请注意，当应用多个 css 转换属性时，您必须将它们写在一行中。 orelse 最后一个转换属性将覆盖您以前的属性。例如）变换：scale() translate() rotate() skew()

对于您的问题，倾斜会将元素倾斜到应用的度数。在此过程中，元素会以度数值的百分比向下推。

所以你可以做的是将元素的 Y 轴转换为负值以将元素设置为其原始位置。

变换：skewY(20deg) translateY(-10px);

d3.select("#chart")
  .append("image")
  .attr("xlink:href", "https://i.stack.imgur.com/R0sAO.jpg")
  .attr("x", 12)
  .attr("y", 30)
  .attr("width", "5.5em")
  .attr("height", "5.5em");

d3.select("#chart")
  .append("image")
  .attr("xlink:href", "https://i.stack.imgur.com/ox20F.jpg")
  .attr("id", "door")
  .attr("x", 27)
  .attr("y", 40)
  .attr("width", "58")
  .attr("height", "78");


$("#door").mousedown(function() {
  $("#door").addClass("doorOpened");
});

.doorOpened {
  animation: spin 0.7s;
  animation-fill-mode: forwards;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: skewY(20deg) translateY(-10px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Revolving door</title>
</head>

<body>
  <svg id="chart"></svg>
</body>

</html>

【讨论】：

感谢您向我解释！你解决了我的几个困惑。
很高兴您发现它很有用。