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

Question

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.

JSFiddle: https://jsfiddle.net/0841c7bm/27/

The code I used for the transformation:

transform-style: preserve-3d;
transition: all 1s linear;
transform: rotateY(180deg);

Any help is appreciated.

EDIT:

Got it to work with the help of Denis McDonald's comment below.

The updated JSFiddle: https://jsfiddle.net/0841c7bm/29/

The updated relevant code part:

#triangle2 {
  background-image: url(https://i.imgur.com/C6sWFbQ.png);
  left: 79px;
  transform-origin: 75px 0px 0px;
}
.flip {
  transform-style: preserve-3d;
  transition: all 0.25s linear;
  transform: rotate3d(1, -1.732, 0, 180deg);
  margin-left: -4px;
}

Explanation:

The first 3 values the rorate3d CSS property accepts are not degree values but rather Cartesian coordinates defining a point in 3d space. To my understanding, the line connecting the origin with the given point is defined to be the rotation axis for the element.

I needed the triangle to rotate around an axis that is parallel to the left-hand side of the second triangle. Such a line would create a 60 degree angle between itself and the x axis. A possible point I could pass to the rotate3d property that would define this line is (1, sqrt(3), 0).

I used a transform-origin, and a -4px left margin (because the second triangle was pushed by 4px to the right to begin with).

Add some code, let's see what you have so far! – Taylor A. Leach Sep 30 '18 at 21:31 — Taylor A. Leach, Sep 30 '18 at 21:31
Thank you, added a JSFiddle. – Jonathan Shifman Sep 30 '18 at 22:29 — Jonathan Shifman, Sep 30 '18 at 22:29

score 0 · Answer 1 · answered Oct 01 '18 at 00:47

With some guidance from this answer, here's perhaps one approach:

var onClick = function() {
  var d = document.getElementById("triangle2");
  d.className += " flip";
};

$('#button').click(onClick);

#container {
  position: relative;
  margin-left: 100px;
}

.triangle {
  display: flex;
  width: 150px;
  height: 130px;
  background-size: contain;
  position: absolute;
}

#triangle1 {
  background-image: url(https://i.imgur.com/a3SWuSZ.png);
}

#triangle2 {
  background-image: url(https://i.imgur.com/giDx0VD.png);
  left: 79px;
}

.flip {
  transform-style: preserve-3d;
  transition: all 1s linear;
  transform: rotateY(180deg) rotateX(180deg);
  transform: rotate3d(90, -157, 0, 190deg);
  margin-left: -59px;
  margin-top: -32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="triangle1" class="triangle">
  </div>
  <div id="triangle2" class="triangle">
  </div>
</div>
<input type="button" id="button" value="Click Me" />

This was a huge help, I updated my post with the final result. Thank you! — Jonathan Shifman, Oct 01 '18 at 08:53
In turn, actually, you've shown me how I wasn't grasping the mechanics of the transform, so thanks likewise! — Denis McDonald, Oct 01 '18 at 09:27

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

1 Answers1