在css中从左上角或右上角旋转三角形

Question

我想从左上角或右上角旋转用 CSS 创建的三角形。我尝试了一些改变原点位置，但效果不好，我做了很多搜索，但没有找到任何明确或相对的东西。有没有办法使用 CSS 实现这些旋转？

示例图片：

第一个三角形从左上角向内旋转。 第二个三角形从右上角向内旋转。 我尝试使用transform:rotate()，它对于从向上到向下或向后都可以正常工作，但我不确定如何将旋转点更改为左上角或右上角。 尝试用过渡来显示此旋转。

我怎样才能做这样的事情？

Answer 1

让我们用一个简单的正方形来做一个例子。

想法是沿着主轴旋转（比如说Y？），然后为了使其像三角形边缘一样倾斜，我将在另一个轴（Z）上旋转整个物体。

.square {
  background: red;
  width: 80px;
  height: 80px;
  transition: 1s;
  border-right: 2px solid yellow;
  transform-origin: right;
}

.square-container {
  display: inline-block;
}

.square-container:hover .square {
  transform: rotateY(180deg);
}

.square-container {
  transform: rotateZ(-45deg);
}

<h2>Hover to trigger rotation:</h2>
<div class="square-container">
  <div class="square">
  </div>
</div>