2

I have to do this

enter image description here

So, can I calculate the rotateY angle in some way or this angle I can define ONLY by eye estimate?

For example, I can do something like this by code below. But as you can see, this is not exactly what I want to do. 

.block {
  width: 300px;
  height: 300px;
  transform: perspective(2000px) rotateY(50deg);
  background: #efd9b5;
  border: 1px solid #b95656;
}
<div class="block"></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Eva
  • 284
  • 3
  • 13
  • Could you be a bit more specific on what you would like to achieve? Also could you share an example code snippet of what you've tried already? – Terminator-Barbapapa Sep 05 '20 at 10:17
  • it's perspective combined with rotate and there is a lof of combination to obtain the same result – Temani Afif Sep 05 '20 at 10:18
  • you may have some headaches but if you follow the duplicate carefully you will get all the formulas you want – Temani Afif Sep 05 '20 at 10:41
  • @Temani Afif I have another question. You've read that D is width without transformation. How can I get it from this photo without rotate angle? – Eva Sep 05 '20 at 13:23
  • you can consider that your element is a square so the D will be the height of the left side. You don't really need to know all the variables because you can get the picture using a lot of combination. You can fix some of them and find the others – Temani Afif Sep 05 '20 at 23:10
  • @Temani Afif Sorry for this stupid question, but look. I tried to check how your formula works. For example, in your answer in the first case you establish values like these p - 100px; D - 200px; angle - (-45deg);.... and formula is R = (p * cos(angle) * D)/(p - (sin(angle) * D)) So, let's calculate: R=(100*cos45*200)/(100 - sin45*200) By the way:....cos45 - 0.52; sin45 - 0.85; ................. R=100*0.85*200/100 - 0.85*200=17000/100-170= 17000/-70= -242 I tried so many times but I've never got the right result. (Right result is 58px) I don't understand what's wrong – Eva Sep 08 '20 at 12:19
  • you are not getting the correct value for cos and sin ... cos(45deg) = sin(45deg) = 0.707. Pay attention to the calculator your are using, the angle is in degree not radian – Temani Afif Sep 08 '20 at 12:23
  • @Temani Afif Okay, I need engineering calculator. And I've just tried to calculate this formula with right values of sin and cos, but it's still not right...... R=100*0.707*200/100 - (0.707*200)=70.7*200/100-141= 14140/-41=-344... It's still not right – Eva Sep 08 '20 at 12:53
  • R = (100 * 0.707 * 200) / (100 - (-0.707*200)) = 14140 / 241.4 = 58.57 .... the sign of the angle is also important, -45deg and +45deg will not give the same sinus – Temani Afif Sep 08 '20 at 13:02
  • @Temani Afif I can't figure out. Where did you get this minus? I looked everywhere and I didn't see this one. ....... For example - http://math2.org/math/trig/tables.htm – Eva Sep 08 '20 at 13:26
  • why are you using tables? use a calculator: https://www.rapidtables.com/calc/math/Sin_Calculator.html .. sin(-45deg) = -0.707 – Temani Afif Sep 08 '20 at 13:33
  • @Temani Afif As I understand, sin angle ALWAYS will be with negative sign? Because it's the only way it works. – Eva Sep 08 '20 at 14:53
  • @Temani Afif And does it formula work only with rotateY? I mean, can I calculate the same with rotateX angle? – Eva Sep 08 '20 at 14:54
  • 1
    it's all about math an geometry, you need to find the right formula. You can do it for any transformation but you need to have a good background of math and understand how transform works in order to identify the formula. The formula I made works **only** for the above case. If you change something then you need a new formula – Temani Afif Sep 08 '20 at 15:03
  • @Temani Afif Yeah, I need to rethink both my math and geometry:) But I really appreciate your help. Thank you – Eva Sep 08 '20 at 17:52

0 Answers0