0

ページが読み込まれたとき、およびユーザーがスパンの上にカーソルを置いたときに、Unicode の三角形 (▵) を 360 度回転させようとしています。私が欲しいものを説明するjsFiddleを設定しました。

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

ページのリロード時に何かをスピン/リセットするための CSS3 と Webkit 変換について十分に知りません。

デモの例としては、Robin Sloan の x が一番上にあります。上に。

4

2 に答える 2

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/

于 2012-11-24T02:52:33.550 に答える
0

これを試してみてください。スパンをホバリングすると三角形が回転します。

<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>
于 2012-11-24T03:02:36.653 に答える