0
私はホイール・オブ・フォーチュンのタイプのアニメーションを作成しようとしています。私は4つのdivを使用していますが、1つはデザイン全体に対して（透過PNGの）他のものの上に1つあります。CSS3アニメーションをposition：relative、およびCPUを過度に使用することなくどのように使用できますか？
私はCSS3を使ってそれをアニメーション化しようとしていますが、問題に遭遇しました：＃回転divの先祖の1つが相対的に位置づけられ、CPUが70％以上にジャンプしたとき（MacBook Pro 2.3Ghz ）。
以下の例では、#mainをposition：absoluteに設定すると、通常のページよりもCPUをそれほど使用せずに正常に動作します。しかし、position：relativeに変更すると、70％を超えるCPU使用率にジャンプします。
誰もこの問題を回避する方法を知っていますか？ここで
は（読みやすくするために、私は唯一の-webkit特定のCSSを書いたが、元のソースはすべての主要な近代的なブラウザに対応するCSSを持っている）私のコードの例です：
<html>
<body>
<style>
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#background {
position: absolute;
background: url("background.png");
width: 604px;
height: 604px;;
}
#bottom {
position: absolute;
background: url("wheel_bg.png");
width: 604px;
height: 604px;;
}
#top {
position: absolute;
background: url("wheel_top.png");
width: 604px;
height: 604px;;
}
#rotate
{
position: absolute;
-webkit-animation-name: rotate;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
background: url("wheel_rotate.png");
width: 604px;
height: 604px;
left: 0;
}
#main {
position: relative; //here's the problem
left: 50px;
top: 50px;
}
</style>
<div id="main">
<div id="background">
</div>
<div id="rotate">
</div>
<div id="top">
</div>
<div id="bottom">
</div>
</div>
</body>
</html>