javascript - Unicode 三 Angular 自旋

Question

我试图让 unicode 三 Angular 形 (▵) 在页面加载时和用户将鼠标悬停在跨度上时旋转 360 度。我已经设置了一个 jsFiddle解释我想要什么。

<span id="header">ULTR<span id="triangle">&#9653;</span></span>

我对 CSS3 和 webkit 转换了解不够，无法在页面重新加载时进行旋转/重置。

示例演示是 Robin Sloan 的 x 在顶部:robinsloan.com，上面写着“嗨:我是 Robin Sloan，加利福尼亚州的作家 × 媒体发明家。”在上面。

Answer 1

The problem is that i don't know enough CSS3 and webkit transformations, and i don't know how to make something spin/reset when the page reloads.

这就是 Google 的用途。以下是如何在悬停时执行此操作，我相信您可以找到如何在页面加载时执行此操作:

#triangle {
  display: inline-block;
  transition: all .5s ease-in-out;
}

#header:hover #triangle {
  transform: rotateZ(360deg);
}

演示: http://jsfiddle.net/W8zRX/10/