Problem with perspective origin and perspective

Question

Hay friends I was trying to make this code. Actually in this code there is no error according to console but I am facing a problem I am not able to control perspective origin and perspective with javascript. If anyone knows why it's not working then I will be very thankful to him/her. I had done many of successful code with same pattern as in this code they all are working but I failed to found error in this code. Before giving answer its humble request that first change do the experiment for yourself by editing code and then give me answer.

Note : I dont want to use css because it is like a controller and if I will use css for this it will not be like a controller anymore.

https://code.sololearn.com/WG0cTlxubs4e/?ref=app

Some successfully completed codes with same pattern of coding .
https://code.sololearn.com/W76nBOzYCEE6/?ref=app
https://code.sololearn.com/Wr3g3JfxYIKI/?ref=app

Answer 1

Hey,

The perspective and perspective-origin properties are in the wrong element. They should be in the parent element of the element with the id of style (child).

"When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself."
https://www.w3schools.com/cssref/css3_pr_perspective.asp

The transform-style: preserve 3d property should be part of the child element.

"preserve-3d Specifies that child elements will preserve its 3D position"
https://www.w3schools.com/cssref/css3_pr_transform-style.asp

"This property must be used together with the transform property."

In this case, it appears that transform: rotate x/y needs to be at least +/-1degree or transform:translate-z should at least +/- 1px, to see any changes in perspective or perspective-origin

https://code.sololearn.com/WomzcjTFX94e/#css

Answer 2

Thanks ODLNT . I had such silly mistake. And very much thanks for giving me idea to short the code for label. Actually I am not expert in javascript. I had just started it before 1 month.

By the way very very thanks to you . 🙏🙏🙏

Answer 3

You are welcome, I'm glad I was able to help.
Keep up the good work!

btw - silly mistakes happen to the best of us more often than not.