如何以特定角度将 CSS 转换应用于 div 元素？

Question

我有两个大小相同的 div 元素。它们相互重叠，并且每个都有一个等边三角形的背景图像，指向两个方向之一：

Triangles image

我想应用一个变换，使右三角形翻转并恰好落在左三角形的顶部。 旋转轴应位于两个三角形几乎共有的边之间的间隙的中心（在图像中以蓝色标记）。这样，直角三角形的右下角应该落在左三角形的左上角。

现在我只能沿一个轴旋转直角三角形（使用变换：rotateY(180deg)），但不知道如何获得直角。

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

我用于转换的代码：

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

感谢任何帮助。

编辑：

在下面 Denis McDonald 的评论的帮助下让它工作。

更新后的 JSFiddle：https://jsfiddle.net/0841c7bm/29/

更新的相关代码部分：

#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;
}

解释：

rorate3d CSS 属性接受的前 3 个值不是度数，而是定义 3d 空间中一个点的笛卡尔坐标。据我了解，连接原点和给定点的线被定义为元素的旋转轴。

我需要三角形围绕平行于第二个三角形左侧的轴旋转。这样的线将在其自身和 x 轴之间形成 60 度角。我可以传递给定义这条线的 rotate3d 属性的一个可能点是 (1, sqrt(3), 0)。

我使用了一个变换原点和一个 -4px 的左边距（因为第二个三角形一开始就被向右推了 4px）。

Answer 1

在this answer 的一些指导下，这可能是一种方法：

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" />