Unicode 三角形旋转答案

【问题标题】：Unicode triangle spinUnicode 三角形旋转
【发布时间】：2012-11-12 07:57:30
【问题描述】：

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

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

我对 CSS3 和 webkit 转换知之甚少，无法在页面重新加载时进行旋转/重置。

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

【问题讨论】：

标签： javascript html css css-transitions css-transforms

【解决方案1】：

问题是我对 CSS3 和 webkit 的了解不够转换，我不知道如何使某些东西旋转/重置当页面重新加载时。

这就是 Google 的用途。以下是悬停时的操作方法，我相信您可以在页面加载时找到操作方法：

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

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

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

【讨论】：

【解决方案2】：

试试这个，它会在悬停跨度时旋转三角形：

<style type="text/css">
#spinner {
   display:inline-block;
   transition: transform 2s ease 0s;
   transform-origin: 52% 58%;
}
.spin {
   transform: rotate(270deg);
}
</style>
<script type="text/javascript">
function pageLoad() {
   var d = document.getElementById('spinner');
   d.onmouseover = function() {
      d.className = 'spin';
   }
   d.onmouseout = function() {
      d.className = '';
   }
 }
</script>
</head>
<body onload="pageLoad();">
  <span id="spinner">&#9653;</span>
</body>

【讨论】：