css - Calculate rotation to have div in "front" when parent container is rotated (Solved) - Stack Overflow

admin管理员组

文章数量:1122832

I have a problem to calculate the good angle to rotate a div child of a div rotated on x axis.

To make it more understandable, I did a fast draw of what I have :

In a scene with configurable perspective (container) expressed in vh, I have a DIV element (parent DIV) that serves as a positioning rectangle for child div elements (child DIV), this parent div is tilted on the X axis by an angle that is also configurable.

My goal is to display the child divs straight facing the screen (top/bottom/right/left edges parallel to top/bottom/right/left edge of the screen) with a square shape (width=height), and therefore to calculate the negative rotation angle on the X axis, so that the child div is straight like I want, but after a lot of unsuccessful attempts and calculations (I'm not very good at maths, quite old to remember school...) I don't get a result that works on all types of settings of the perspective and the tilt angle of the parent rectangle...

I thought I simply had to do the reverse angle of the parent, ie parent angle = 50deg, child angle = -50deg, but it doesn't work like that sadly... and after some tests, I found that the value of the perspective property had an influence on the rendering of the child div too...

To illustrate what I want to do some screens of my project : This one is quite good width 57deg parent/-33deg child and also a scaleY(1.6) to the child, otherwise it's not a square, but if I change perspective or angle it goes bad...

This one is not good at all, the scene has smaller scale and my child divs arent straight while using same bad formula to calculate rotateX angle...

Any idea to help me will be much welcome !

(ps: sorry for my bad english... not my mother langage)

Edit: Did a snippet to simplify and show my problem :

#scene { 
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); 
  width: 400px; height: 300px; perspective: 60vh; overflow: hidden; }
#recp { 
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #393; 
  transform: rotateX(50deg); transform-origin: bottom; backface-visibility: hidden; 
  transform-style: preserve-3d; perspective: 60vh; }
#recp > div { 
  position: absolute; width: 20%; height: 80px; background: #999; 
  transform: rotateX(-25deg); transform-origin: bottom; 
  font-size: 48px; text-align: center; line-height: 80px; }
#recp > div#elt1 { left: 0; top: 0; }
#recp > div#elt2 { left: 40%; top: 40%; }
#recp > div#elt3 { left: 80%; top: 60%; }

<div id="scene">
  <div id="recp">
    <div id="elt1">1</div>
    <div id="elt2">2</div>
    <div id="elt3">3</div>
  </div>
</div>

I have a problem to calculate the good angle to rotate a div child of a div rotated on x axis.

To make it more understandable, I did a fast draw of what I have :

In a scene with configurable perspective (container) expressed in vh, I have a DIV element (parent DIV) that serves as a positioning rectangle for child div elements (child DIV), this parent div is tilted on the X axis by an angle that is also configurable.

My goal is to display the child divs straight facing the screen (top/bottom/right/left edges parallel to top/bottom/right/left edge of the screen) with a square shape (width=height), and therefore to calculate the negative rotation angle on the X axis, so that the child div is straight like I want, but after a lot of unsuccessful attempts and calculations (I'm not very good at maths, quite old to remember school...) I don't get a result that works on all types of settings of the perspective and the tilt angle of the parent rectangle...

I thought I simply had to do the reverse angle of the parent, ie parent angle = 50deg, child angle = -50deg, but it doesn't work like that sadly... and after some tests, I found that the value of the perspective property had an influence on the rendering of the child div too...

To illustrate what I want to do some screens of my project : This one is quite good width 57deg parent/-33deg child and also a scaleY(1.6) to the child, otherwise it's not a square, but if I change perspective or angle it goes bad...

This one is not good at all, the scene has smaller scale and my child divs arent straight while using same bad formula to calculate rotateX angle...

Any idea to help me will be much welcome !

(ps: sorry for my bad english... not my mother langage)

Edit: Did a snippet to simplify and show my problem :

#scene { 
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); 
  width: 400px; height: 300px; perspective: 60vh; overflow: hidden; }
#recp { 
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #393; 
  transform: rotateX(50deg); transform-origin: bottom; backface-visibility: hidden; 
  transform-style: preserve-3d; perspective: 60vh; }
#recp > div { 
  position: absolute; width: 20%; height: 80px; background: #999; 
  transform: rotateX(-25deg); transform-origin: bottom; 
  font-size: 48px; text-align: center; line-height: 80px; }
#recp > div#elt1 { left: 0; top: 0; }
#recp > div#elt2 { left: 40%; top: 40%; }
#recp > div#elt3 { left: 80%; top: 60%; }

<div id="scene">
  <div id="recp">
    <div id="elt1">1</div>
    <div id="elt2">2</div>
    <div id="elt3">3</div>
  </div>
</div>

Edit2: After some testings and readings, I understand that the only angle is not enough to solve my problem... The perspective of the parent div is also important to have a good rendering of the child, Actually I put the same value than the container perspective but it's wrong I think, this must be a value that corresponds to the positioning rectangle (parent div) itself. So the question remains as to which formula to use to calculate the correct angle on the child div and the correct perspective on the parent div...

Edit3: By dint of trial and error and without really understanding the mathematical logic of what I'm doing (mmmmhhhh...) I realize that if I keep the same perspective and apply an angle equal to half the angle of the parent div in negative, I'm almost good, give or take a few pixels... I updated the code snippet.

Maybe I need another perspective value for the parent div and be pixel-perfect, or maybe my assumption about the angle divided by 2 is not correct, I admit to being quite lost with these maths...

There is also the height of the div, I have a JS routine that goes through my child elements and assigns a height in pixels equal to the width of the image, to be sure that it is square (the width is expressed as a percentage for alignment needs on a grid), but when rendered the image is not square at all...

Edit4: Updated snippet with preserve-3d (thanks @ Temani Afif) Added W/H ratio of 4/3 on container because my project scene has this aspect ratio.

• css
• math
• 3d
• transform

Share Improve this question Follow edited Nov 23, 2024 at 10:06 Mike G. asked Nov 21, 2024 at 14:25 Mike G.Mike G. 7377 bronze badges 4

• 1 transform-style: preserve-3d; on recp? – Temani Afif Commented Nov 21, 2024 at 19:28
• @TemaniAfif You're right, I don't remember why I set it to flat, but I made some tests and preserve-3d on recp change the height of children divs, with it the scaleY() is no more needed to preserve the square aspect, a problem solved thanks ! remains the calculation of the perfect angle (and perhaps the right perspective on the recp...) so that the child divs are straight. – Mike G. Commented Nov 22, 2024 at 9:07
• protip: don't have four "edit" sections in a question, just rewrite your post so that if someone discovers it after you made your edits, they find a normal question. Edit sections only make sense for answers, not questions (and then only when the answer needs an update because time has moved on and it's no longer correct. Then you add an edit section because the old answer of course still applies to the old situation). – Mike 'Pomax' Kamermans Commented Nov 22, 2024 at 17:48
• 1 I thought it would be easier to follow for those who have already read my question, to see what I understood and modified between the beginning and the end, but I understand the meaning of what you are telling me, I will keep it in mind for the next time. – Mike G. Commented Nov 23, 2024 at 10:05

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

As you say, the way things are to be shown on the screen very much depends on where the observer is standing.

Luckily, no need to do complex calculations yourself, CSS can 'think' 3D.

What you have is a plain (grass) and sitting on it but vertical to it are 3 children.

So position them how you want. The one bit of calculation this snippet does is to work out where their bottoms are given where their tops would be if they were lying down flat. This is simple if you know their height - you may want to make that a variable too if the rectangles are different heights.

Then rotate the whole thing in 3D by 90 degrees - ie lay the grass down flat.

<style>
  #scene {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 10vh;
  }
  
  #recp {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(90deg);
    /* lay your grass down horizontal */
    transform-origin: center bottom;
    backface-visibility: hidden;
    background: #393;
  }
  
  #recp>div {
    position: absolute;
    width: 20%;
    height: 80px;
    background: #999;
    transform-origin: center bottom;
    font-size: 48px;
    text-align: center;
    line-height: 80px;
    bottom: calc(100% - var(--top) - 80px);
    transform: rotateX(-90deg);
    left: var(--left);
  }
  
  #recp>div#elt1 {
    --left: 0px;
    --top: 0px;
  }
  
  #recp>div#elt2 {
    --left: 40%;
    --top: 40%;
  }
  
  #recp>div#elt3 {
    --left: 80%;
    --top: 60%;
  }
</style>
<div id="scene">
  <div id="recp">
    <div id="elt1">1</div>
    <div id="elt2">2</div>
    <div id="elt3">3</div>
  </div>
</div>

A simple way to "fix" this would be to remove the children from your parent div and just add them on top of it. This eliminates the need for you to work with tilted divs.

本文标签： cssCalculate rotation to have div in quotfrontquot when parent container is rotated (Solved)Stack Overflow