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

Question

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

，边框半径为 : 100%;) 我希望 border 始终具有 相同的宽度 。但是，元素旋转时边框消失：

无论rotateX如何，边框都可以具有相同的宽度吗？谢谢你的回答。

编辑： ，我也是这么想的，但是我不能手动写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>

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

Border disappears, when I use rotateX on element

javascript

css

css-transforms