当我在元素上使用 rotateX 时，边框消失了

Question

我正在尝试创建一个旋转椭圆（

border-radius: 100%;）并且我想边框始终具有相同的宽度。但是，当元素旋转时，边框会消失：

不管rotateX如何，它可能是具有相同宽度的边框？谢谢你的回答。

编辑： GCyrillus，我也想过类似的事情，但是我不能手动写border-width的值。椭圆使用 JavaScript 进行线性旋转：

window.onload = function() {

  var ellipse = document.getElementById('ellipse');
  var angle = 0;
  
  setInterval(function() {
    angle++;
    ellipse.style.transform = 'rotateX(' + angle + 'deg)';
  }, 20);
  
};

section {
   perspective: 1000px;
}

#ellipse {
  border: 1px solid black;
  border-radius: 100%;
  height: 300px;
  margin-bottom: 20px;
  position: relative;
  width: 500px;
}

<section>
  <div id="ellipse"></div>
<section>

【问题讨论】：

Answer 1

因为旋转，一切都变细了，边框也变细了。

您可以进行增加它们的测试。带阴影的示例：

section {
   perspective: 1000px;
}

div {
  background-color: lightgreen;
  border: 1px solid black;
  border-radius: 100%;
  height: 100px;
  margin-bottom: 20px;
  position: relative;
  width: 200px;
}

#rotate45 {
  transform: rotateX(70deg);
  box-shadow:0  2px 1px , 0  -2px 1px;
}

#rotate90 {
  transform: rotateX(90deg);
  box-shadow:0  7px 2px , 0  -7px 2px;
}

<section>
  Rotate 0°, it's OK:
  <div id="rotate0"></div>
  
  Rotate 45°, border is dashed:
  <div id="rotate45"></div>
  
  Rotate 90°, border is almost invisible:
  <div id="rotate90"></div>
<section>

---

编辑您的评论。

如果您在旋转发生时也包含border 厚度（或shadow），它应该会有所帮助：

section {
   perspective: 1000px;
}

div {
  background-color: lightgreen;
  border: 1px solid black;
  border-radius: 100%;
  height: 100px;
  margin-bottom: 20px;
  position: relative;
  width: 200px;
  transition:1s;
}

#rotate45:hover {
  transform: rotateX(70deg);
  box-shadow:0  2px 1px , 0  -2px 1px;
}

#rotate90:hover {
  transform: rotateX(90deg);
  box-shadow:0  7px 2px , 0  -7px 2px;
}

<section>
  Rotate 0°, it's OK:
  <div id="rotate0"></div>
  
  Rotate 45°: <i>hover it to see transition on transition and shadow</i>
  <div id="rotate45"></div>
  
  Rotate 90°: <i>hover it to see transition on transition and shadow</i>
  <div id="rotate90"></div>
<section>