rendering Canvas in transformed parent

[garretteklof]

Hello - first and foremost, thanks for all the work done on this incredible library!

My question is probably more of a CSS issue, but I'm trying to figure out how to render the canvas in a 3D transformed parent element that gives the effect of it on a plane. I can't seem to get the canvas to properly take up the height / width of the parent (inspect and you'll see <canvas> going rogue) and if I manually override the height and width w/ CSS I lose the ability to interact in the canvas (block events). This seems to be due to rotateY transform. I tried all sort of combinations. Any best way in achieving this?

Attached is a codepen -> https://codesandbox.io/s/r3f-basic-demo-forked-8544c?file=/src/styles.css

[drcmda]

Canvas fills 100% of the next relative or absolute parent. A parent that is neither does not really classify as a parent in css.

[garretteklof]

Please explain this to me like I'm an 8 year old. I'm not sure I'm following you. The next relative div (which I think is automatically set by <Canvas component) is positioned relative and has the correct height and width dimensions?

[drcmda]

in css "width: 100%" doesn't mean your element fills the parent. it means it fills the next parent that is either relative or absolute:

div position:absolute width: 1000px
  div width: 500px
    div width: 100% -> 1000px

your div is relative, so it's fine (i couldn't check before, wasn't home). your example, it looks like getboundingclientrect gets the size after the transform, which is 2/3rd of the original, just like the blue "100% width" box now has margins. it's using https://github.com/pmndrs/react-use-measure . getting size of the dom is hard and im not sure it can do that. i remember we had this before and the guy found a workaround.

[drcmda]

looks like there's no way: https://stackoverflow.com/questions/27745438/how-to-compute-getboundingclientrect-without-considering-transforms getboundingclientrect gets size after the transform. and the hacks they suggest won't work for a published library. i would suggest you let the canvas be flat and skew its contents and well as dom overlays like in this demo: https://codesandbox.io/s/react-spring-v9-rc-6hi1y