Zoom & Flip Logo

[Former Member]

Hi guys. I wish to use the following as a logo for my forum:


</style>
<style type="text/css" media="screen">
@keyframes flip {
0% { transform: rotateY(0deg); }
20% { transform: rotateY(90deg); }
80% { transform: rotateY(270deg); }
100% { transform: rotateY(360deg); }
}
@-webkit-keyframes flip {
0% { -webkit-transform: rotateY(0deg); }
20% { -webkit-transform: rotateY(90deg); }
80% { -webkit-transform: rotateY(270deg); }
100% { -webkit-transform: rotateY(360deg); }
}
@-moz-keyframes flip {
0% { -moz-transform: rotateY(0deg); }
20% { -moz-transform: rotateY(90deg); }
80% { -moz-transform: rotateY(270deg); }
100% { -moz-transform: rotateY(360deg); }
}
@-o-keyframes flip {
0% { -o-transform: rotateY(0deg); }
20% { -o-transform: rotateY(90deg); }
80% { -o-transform: rotateY(270deg); }
100% { -o-transform: rotateY(360deg); }

}
.flipper:hover {
animation-name: flip; -webkit-animation-name: flip; -moz-animation-name: flip; -o-animation-name: flip;
animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-duration: 3s; -o-animation-duration: 3s;
animation-timing-function: linear; -webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear; -o-animation-timing-function: linear;
animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden; -o-backface-visibility: hidden; transform-style: preserve-3d
}
@keyframes rotate {
0% { transform: rotateY(0deg); right: 0px; top: 55px; }
10% { transform: rotateY(180deg); }
100% { transform: rotateY(180deg) scale(0.05); right: -25px; top: 155px; }
}
@keyframes rotates {
0% { transform: rotateX(0deg); }
20% { transform: rotateX(180deg); }
50% { transform: rotateZ(180deg); }
70% { transform: rotateY(180deg); }
100% { transform: rotateX(359deg); }
}
@-webkit-keyframes rotates {
0% { -webkit-transform: rotateX(0deg); }
15% { -webkit-transform: rotateX(180deg); }
50% { -webkit-transform: rotateZ(180deg); }
65% { -webkit-transform: rotateY(180deg); }
100% { -webkit-transform: rotateX(359deg); }
}
@-moz-keyframes rotates {
0% { -moz-transform: rotateX(0deg); }
15% { -moz-transform: rotateX(180deg); }
50% { -moz-transform: rotateZ(180deg); }
65% { -moz-transform: rotateY(180deg); }
100% { -moz-transform: rotateX(359deg); }
}
@-o-keyframes rotates {
0% { -o-transform: rotate(0deg); }
15% { -o-transform: rotate(90deg); }
50% { -o-transform: rotate(180deg); }
65% { -o-transform: rotate(270deg); }
100% { -o-transform: rotate(0deg); }
}
.rotaters:hover {
animation-name: rotates; -webkit-animation-name: rotates;
-moz-animation-name: rotates; -o-animation-name: rotates;
animation-duration: 5s; -webkit-animation-duration: 5s; -moz-animation-duration: 5s; -o-animation-duration: 5s
}
@keyframes bye {
0% { top: 4px; left: 5px; }
100% { top: 120px; left: 100px; opacity: 0; transform: scale(2); }
}
@-webkit-keyframes bye {
0% { top: 4px; left: 5px; }
100% { top: 120px; left: 100px; opacity: 0; -webkit-transform: scale(2); }
}
@-moz-keyframes bye {
0% { top: 4px; left: 5px; }
100% { top: 120px; left: 100px; opacity: 0; -moz-transform: scale(2); }
}
@-o-keyframes bye {
0% { top: 4px; left: 5px; }
100% { top: 120px; left: 100px; opacity: 0; -o-transform: scale(2); }
}
.byebye:hover {
      animation-name: bye; -webkit-animation-name: bye;  -moz-animation-name: bye; -o-animation-name: bye;
      animation-duration: 1s; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s;
      position: relative;
      top: 0px;
}
.reverse {
backface-visibility: hidden; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden; -o-backface-visibility: hidden;
transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); -o-transform: rotateY(180deg)

</style>
<script type="text/javascript" src="" charset="UTF-8"></script><link rel="stylesheet" crossorigin="anonymous" href=""/><script type="text/javascript">
var slides = new Array (

);
var slidesy = new Array (

);
var which=0;
var whichy=0;
window.onload=function() {  
next();
nexty();

</script>
<script>
 
</script>
</head>

<body>

<table cellpadding=12 style="background-color:black; width: 1300px; border-spacing: 100px; background: #fffff">
<tr>

<td colspan=3 style="width: 100%; border:2px solid transparent; border-radius: 30px; -khtml-border-radius: 30px; -moz-border-radius: 30px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7)"
min-height: 130px; position:relative; left:0; top:0;
-webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain;
_border-color:tomato; _filter:chroma(color=tomato)" /* for IE6 */
id="slideshow">

<img class="byebye" src="http://www140.lunapic.com/do-not-link-here-use-hosting-instead/150392252360578?6185049154" width=219 height=328 alt="Me" title="Me"
style="position: absolute; left:10px; top: 50px; z-index: +1">
<center style="perspective: 219px; -webkit-perspective: 629px; -moz-perspective: 550px; margin-left: -70px">
<script type="text/javascript">
<!--
if ( navigator.userAgent.toLowerCase().indexOf('safari') != -1
&& navigator.userAgent.toLowerCase().indexOf('edge') == -1) {
document.write( '<div id="stuff" class="rotaters"  onclick="void(0)" style="margin: -24px; font-size: 60px; font-family:');
document.write(" 'Bowlby One' ");
document.write(', sans-serif; font-weight: bold; background: url() repeat fixed, transparent; background-clip: text, border; -webkit-background-clip: text, border; color: transparent; -webkit-box-reflect: below -49px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.01)), color-stop(0.4, rgba(0,0,0,.03)), color-stop(0.5, rgba(0,0,0,.08)), to(rgba(0,0,0,.7)))"></div>')
} else {
document.write('<img class="rotaters" onclick="void(0)" src="http://www140.lunapic.com/do-not-link-here-use-hosting-instead/150391666513256?1895590191" width=619 height=147 alt="" title="" style="-webkit-box-reflect: below -1.5px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.01)), color-stop(0.4, rgba(0,0,0,.03)), color-stop(0.6, rgba(0,0,0,.08)), to(rgba(0,0,0,.7)))">')
};
//-->
</script>
</center>
<p>
<table style="width: 100%; border-collapse: collapse; line-height:1.2"><tr>
<td></td>
<td align=left; style="width:55%">
<b><span style="font-size:smaller"><span style="font-size:smaller"></span></span> </b>
<a href=""></a>
<a href=""></a>
<br>
<span style="font-size:smaller"><span style="font-size:smaller"></span></span> <a href=""></a>
<a href="></a>insert code here
I want to be able to mouse over it and see all the effects. Is it possible and would you please tell me where to insert that code? Thank you so much.

[Tumbleweed]

@leta2 ,

That coding is in pretty bad shape with stray tags, like all of these...

<script>
</script>
</head>
<body>



...and it is missing closing tags and has some outdated inline styling and it looks like you are missing parts of the table (nothing closing the two tables). There is a script in the middle of a partial table that seems to do nothing. I did clean it up and got one part to work, I think.
I replaced the original image because it said not to hotlink the image.


I'm not sure where you got that code but I'd make sure I got it from the original source because what you posted looks like it was copied from site to site with other peoples boo boos in it or something. Also, some of that might be able to be done using simple css. Like at the test site where I have the one working,  if you look at the bottom of my page I did a rotate and fade with just css, although not super smooth and a bit fast. You can do a lot with jquery too. Like here is one I found just googling now: jsfiddle.net/FPKAP/12/

Maybe someone who really understands javascript can help you work this out since i couldn't figure out anything beyond the one example that was already in the table. But once the code was cleaned up you could put it in your headers or in the wrapper template. I'd give you what I have but it is obviously incomplete. 

[Former Member]

Thank you so much, Tumbleweed. I've pm'd you some info. The first part looks great! Good job! Would you please post the code and the location where it goes? Also, am I going to be able to put both images and their corresponding flip and zoom effects into a single logo, or would I have to split one image as a background and the other as a logo? Would you please hold my hand through the whole process?

[Tumbleweed]

Aug 30, 2017 9:58:53 GMT -8 @leta2 said:

Thank you so much, Tumbleweed. I've pm'd you some info. The first part looks great! Good job! Would you please post the code and the location where it goes? Also, am I going to be able to put both images and their corresponding flip and zoom effects into a single logo, or would I have to split one image as a background and the other as a logo? Would you please hold my hand through the whole process?

Thanks for the info of where you got it. I'll try to look at it today and decipher what parts go with what.

[Former Member]

You're welcome. I really appreciate the time and effort you are putting into it.