イメージ上のアニメーションのスイング。 （居酒屋の看板のように）

Question

ここにこのコードがありますが、なんらかの理由で自分のウェブサイトでは機能しません。コードに何か問題がある場合は教えてください。 jsfiddleで動作します。

HTML

<div class="swing" style="background-color:#transparent;"> 
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /> 
</div> 

CSS

.swing { 
-webkit-perspective:300px; 
-moz-perspective: 300px; 
-ms-perspective: 300px; 
perspective: 300px; 
} 
.swing img { 
-webkit-transform-origin: 50% 0%; 
-moz-transform-origin: 50% 0%; 
-ms-transform-origin: 50% 0%; 
-transform-origin: 50% 0%; 
} 

JS

$('.swing img').mouseenter(function(event) 
{ 
var sign = event.currentTarget; 
sign.rotationX = 0; 
TweenMax.to(sign, 0.2, { rotationX:-20, ease:Power1.easeOut, onUpdate:onUpdate, onUpdateParams:["{self}"]}); 
TweenMax.to(sign, 0.4, { rotationX:8, ease:Power1.easeInOut, onUpdate:onUpdate, onUpdateParams:["{self}"], delay:0.2 }); 
TweenMax.to(sign, 3, { rotationX:0, ease:Elastic.easeOut, onUpdate:onUpdate, onUpdateParams:["{self}"], delay:0.6 }); 
}); 
function onUpdate(tween) 
{ 
var target = tween.target; 
target.style.webkitTransform = target.style.transform = target.style.msTransform = target.style.MozTransform = 'rotateX('+(target.rotationX)+'deg)'; 
} 

Answer 1

フィドルは、外部リソースを持っています。コードパネルからコードをコピー/ペーストするだけであれば、リソースは含まれません。

これを追加します。

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.1/TweenMax.min.js"></script>