Question

我正在尝试制作这款自行车（带图像的div）自行车（css3动画）onclick（javascript），整个过程非常有效，除了持有自行车的div忽略变换原点（它也从0％旋转） 0％，这是更糟糕的）（我通过删除所有javascript和其他css测试div，我认为会阻止它，它仍然从0％0％旋转）。我觉得这很令人困惑，因为我以前用div做过这个，但也许我忽略了一些东西。万一你想知道一切都必须绝对定位，但以前从未引起过这个问题。

此外，如果您对我的代码有任何意见，我可以如何清理它，或者如果我写一个回合的方式请告诉我，我总是试图改进。谢谢。

相关CSS：

#wheel{position:absolute; top:293px; left:37px; -webkit-animation:tire 4s; -webkit-    animation-iteration-count:infinite; -webkit-animation-timing-function: linear;}
#wheel2{position:absolute; top:293px; left:315px; -webkit-animation:tire 4s; -webkit-   animation-iteration-count:infinite; -webkit-animation-timing-function: linear;}
#bike{position:absolute; top:130px; left:220px; }
#bikein{position:absolute; top:0px; left:0px; }
@-webkit-keyframes wheelie{
0%   {-webkit-transform: rotate(0deg);}
50%   {-webkit-transform: rotate(-60deg);}
100%   {-webkit-transform: rotate(0deg);}
}

HTML：

<div id="bike">
<img src="images/p4/wheel.png" alt="title page" id="wheel" />
<img src="images/p4/wheel.png" alt="title page" id="wheel2" />
<img src="images/p4/bike.png" alt="title page" id="bikein"/>
</div>

使用Javascript：

var bike = document.getElementById('bike');
function bikeAni(event){
event.preventDefault();
bike.style.webkitAnimationName = 'wheelie';
bike.style.webkitAnimationDuration = '1s';
bike.style.webkitAnimationIterationCount = '2';
bike.style.webkitTransformOrigin = '80% 15%';
bike.onclick = null;
setTimeout(function() {
    bike.style.webkitAnimationName = '';
    bike.onclick = bikeAni;
    }, 2000);
}
bike.onclick = bikeAni;

Answer 1

#bike的高度和宽度均为零，因为您绝对定位图像。这样，零的50％等于0％。试着给它一个宽度和高度。

div从错误的原点转换;忽略变换起源

1 个答案: