How can I apply a CSS transformation to a div element in a specific angle?

I have two div elements of the same size. They overlap each other and each of them has a background image of an equilateral triangle pointing in one of two directions:

Triangles image

I would like to apply a transformation so that the right triangle is flipped and lands exactly on top of the left triangle. The rotation axis shall be the center of the gap between the sides that the two triangles almost share (marked in blue in the image). This way, the bottom right corner of the right triangle is supposed to land on the top left corner of the left triangle.

Right now I can rotate the right triangle only along one axis (using transform: rotateY(180deg)), but can't figure out how to get the right angle.

Any help is appreciated.