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

Question

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

with border-radius: 100%;)并且我想 border 总是 相同的宽度。但是，元素旋转时边框消失:

无论 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>

最佳答案

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

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

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>

关于javascript - 当我在元素上使用 rotateX 时，边框消失了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39086875/

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>