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

Question

我是 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>

Answer 1

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>

Answer 2

您可以尝试将您的 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>

Answer 3

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

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

因此您可以做的是将元素的 Y 轴平移为负值，以将元素设置到其原始位置。

变换：倾斜 Y(20deg) 平移 Y(-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>

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

CSS: Trying to rotate door without vertical translation

html

css

jquery

css-animations