Было дело как то "смастырил" я плавающую картинку. Не помню уже как, помню только обошлось мне это бессонную ночь на выходные. Короче методом тыка, однако работает!
Этот блог перегружен скриптами, так что пришлось это дело выпилить. Но для любителей экзотики, может даже очень пригодиться!
Как это выглядит, вы можете посмотреть демо по этой ссылке:
http://blogodel-test.blogspot.com/2012/11/blog-post_16.html
<style type="text/css">
#holder {
margin:50px auto;
-webkit-perspective:200px;
-moz-perspective:200px;
text-indent: 0px;
}
.box {
position: relative;
margin: 0 auto;
height: 200px;
width: 200px;
-webkit-animation: spin 20s infinite linear;
-moz-animation: spin 20s infinite linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.box div {
position: absolute;
height: 0px;
width: 0px;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
opacity:0.8;
-webkit-animation:rotate 15s infinite linear;
-moz-animation:rotate 15s infinite linear;
}
.box div img {width:100px; height:100px;
border-radius:0px;
-webkit-animation:rot 10s infinite linear;
-moz-animation:rot 10s infinite linear;
padding: 0;background: #ffffff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 0px solid #b0aeae;
}
.box div.side1 {
background:transparent;
-webkit-transform:translatez(100px);
-moz-transform:translatez(100px);
}
@-moz-keyframes spin {
0% {-moz-transform: rotatex(0deg) rotatey(0deg);}
100% {-moz-transform: rotatex(1080deg) rotatey(360deg);}
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotatex(0deg) rotatey(0deg);}
100% {-webkit-transform: rotatex(1080deg) rotatey(360deg);}
}
@-moz-keyframes rot {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rot {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
</style>
<br />
<div id="holder">
<div class="box">
<div class="side1">
<img border="0" src="http://1.bp.blogspot.com/-2gDaRWu60HM/UKZHJnLihSI/AAAAAAAACD0/2QMWea8_faY/s1600/Google-Blogger-32+(3).png" /></div>
</div>
