【CSS3】CSS3 2D 转换 - rotate 旋转 ② ( 使用 rotate 旋转绘制三角形 )

/* 使用 CSS3 2D 转换的 rotate 函数，绘制一个等边三角形 */
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86.6px solid #2ecc71;
  position: relative;
  top: -50px;
}
 
/* 使用 CSS3 2D 转换的 rotate 函数，将三角形旋转为一个正方形 */
.triangle-rotate {
  transform: rotate(45deg);
  animation: rotate-triangle 5s infinite linear;
}
 
/* 创建一个无限循环的动画，持续旋转正方形 */
@keyframes rotate-triangle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这段代码定义了一个 .triangle 类，用于创建一个等边三角形。然后定义了一个 .triangle-rotate 类，该类使用 CSS3 的 transform 属性和 rotate 函数将等边三角形旋转为正方形，并且使用 @keyframes 创建了一个无限循环的动画，使得正方形可以持续旋转。这个示例展示了如何使用 CSS3 的 2D 转换和动画来创建动态的图形效果。