Mr. Human Mr. Human - 3 months ago 8
Javascript Question

Border disappears, when I use rotateX on element

I am trying to create a rotating ellipse (<div> with border-radius: 100%;) and I would like to border has a same width always. However, border disappears when element rotating:

It could be border to have the same width regardless of the rotateX? Thank you for your answers.

EDIT:
GCyrillus, I thought something similar, but I cannot write values of border-width ​​manually. Ellipse rotates lineary using 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

Because of rotation, everything becomes thinner, so do the borders.

You can give a test increasing them. Example with a shadow:

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>


edit from your comment.

If you include border thickness (or shadow) as well while rotation happens, it should help :

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>

Comments