html - 如何将 CSS 转换应用于特定 Angular div 元素？

Question

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

Triangles image

我想应用一个变换，使右三 Angular 形翻转并正好落在左三 Angular 形的顶部。 旋转轴应为两个三 Angular 形几乎共享的边之间的间隙的中心(图中以蓝色标记)。这样，右三 Angular 形的右下角应该落在左三 Angular 形的左上角。

现在我只能沿一个轴旋转直 Angular 三 Angular 形(使用 transform: rotateY(180deg))，但不知道如何获得正确的 Angular 。

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 空间中的点的笛卡尔坐标。据我了解，连接原点和给定点的线被定义为元素的旋转轴。

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

我使用了 transform-origin 和 -4px 的左边距(因为第二个三 Angular 形开始时被向右推了 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" />