时间戳

首页 > 解决方案 > 如何以特定角度将 CSS 转换应用于 div 元素？

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

问题描述

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

三角形图像

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

现在我只能沿一个轴旋转直角三角形（使用变换：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）。

标签： htmlcssweb

解决方案

在这个答案的一些指导下，这可能是一种方法：

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

推荐阅读