CSS响应图像动画（带绝对元素）

Question

无论我尝试什么，我都无法做到这一点。 我认为问题可能是它里面的绝对元素很少，但我对它不太确定？

我想把它放在标题中，这样它只会随着页面宽度缩小而缩放，但我无法实现...

HTML

<div class="conLogo">
<a id="cube" href="#">

<div class=weaver>
<img class="moveLittle" src="http://i.imgur.com/LyPWn45.png"></div>

<div class=ghost></div>

</a>
</div>

和CSS：

#conLogo {
width: 60%;
margin:0 auto;

}


#cube {
display: block;
margin: 30px auto;
height: 200px;  width: 1%;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
transform-style: preserve-3d;
transform: rotateX(0) rotateY(0) rotateZ(0);
}

#front {
position: absolute;  height: 200px;  width: 200px;
-webkit-backface-visibility: visible;
-webkit-transform:  translateZ(100px);
backface-visibility: visible;
transform:  translateZ(100px);
}
#back {
position: absolute;  height: 200px;  width: 200px;
-webkit-backface-visibility: visible;
-webkit-transform:  rotateY(180deg) translateZ(100px);
backface-visibility: visible;
transform: rotateY(180deg) translateZ(100px);
}
#cube {
-webkit-animation: upyourscache1377134648493 5s infinite linear;
animation: upyourscache1377134648493 5s infinite linear;

}
@-webkit-keyframes upyourscache1377134648493 {
0% { -webkit-transform: rotateY(0) ;}
100% { -webkit-transform: rotateY(360deg) ;}
}
@keyframes upyourscache1377134648493 {
0% { transform: rotateY(0) ;}
100% { transform: rotateY(360deg) ;}
}

.ghost{
background:#dfe;
margin:auto;
margin-top: -85px;

box-shadow:0 0 28px 9px #dfe;
color:#132;
width:20px; 
}

.moveLittle{
margin-left:-30px;

}


.ghost{
-webkit-animation:1.5s glow infinite alternate;
animation:1.5s glow infinite alternate;
}
@-webkit-keyframes glow{
from {opacity:0.1;}
to {opacity:1.0;}
}
@keyframes glow{
from {opacity:0.1;}
to {opacity:1.0;}
}

codepen链接： http://codepen.io/anon/pen/NPaBMp

基本上我想要获得的是这种简单的响应效果：http://codepen.io/webcraftsman/pen/bwhtI

任何提示都表示赞赏。