Can I add a link to the flipped image? (CSS 3D Flip)

[mlegg]

CSS 3D Flip

Can the flipped image become a link? I want to use the 3D flip but on the 1st image I want it to be a regular image but when it flips I would like the image to turn into a link. Is this possible?

thanks

[loljez]

Try sticking a <a href="website.com"> </a> around the <img> tag, might need to specify border=0 in the <img> tag if you turn it into a link however. should work.

[mlegg]

ah, I didn't think it would be that simple, thanks

[mlegg]

I used it on this test page http://www.ipcamhd.com/indexflip.html for the top left image

It works incredible!

[jscheuer1]

Just an observation. In Chrome it works but I think you should also link the unrotated image (Tenvis-images/Mini319W.jpg).

I say this because when you first move the mouse over it, the cursor is an arrow and there's no link address in the status. If as it starts to flip you stop moving the mouse, after it flips it remains an arrow cursor with no link address in the status. Only after you move the mouse some more does the cursor change to the pointer and the address appears in the status.

A fine point I know. But easily fixed, just add the highlighted:

 <div class="flip" style="display: inline-block; margin-right: 40px">
 <div class="rotate x">
 <a href="mini319.html"><img src="Tenvis-images/Mini319W.jpg" width="250px" height="250px"></a>
 <div>
 <a href="mini319.html"><img src="images/BuyNow.jpg" style="margin:0 auto" /></a>
 </div>
</div>
</div>

Another reason for doing so is that it's possible that some browser(s) might only show the unrotated image

[mlegg]

Thanks John

[mlegg]

John I uploaded the test page and it works fine in everything but IE. In IE you see the "Buy Now" image only.

http://www.ipcamhd.com/indexflip.html is where the test page is at.

[jscheuer1]

I guess you haven't checked in Opera then, it too is unsupportive of the CSS involved. IE 9 doesn't support the CSS, but at least it degrades gracefully in most cases, showing the flipped to image. There's an even greater problem with IE 10 though, it does support some of the CSS, but not all. It will show the product image and flip that, no image change.

With IE 9 and less you can use conditional comments to present alternate content and/or styles to the user (perhaps a javascript mouseover fade transition). However, with IE 10, MS has discontinued conditional comments. So you either have to use an emulate IE9 meta tag to get IE 10 to follow the conditional comments for IE 9 and less or use javascript to browser sniff IE 10 and have it do something different. Opera, you would have to sniff.

It's a mess I know. But these CSS features (according to the Mozilla Developer Network) are still experimental. Only Chrome, and Firefox behave as expected as far as I know. That probably means that Safari would work and probably other Mozilla based browsers.

They're best used when only showing the flipped to image is an acceptable result in unsupporting browsers, even then, IE 10 (as mentioned above) is a special case. It will only show the flipped from image and flip it.

[mlegg]

OK thanks a lot.

[jscheuer1]

Sure. Oddly it's the backface-visibility property that's apparently the problem in IE 10. On:

https://developer.mozilla.org/en-US/...ace-visibility

MDN indicates it's supported by IE 10. However their demo images on that page do not work in IE 10 as they do in Chrome and the Fox. I played around with it a bit and IE 10 does make a distinction between backface-visibility: hidden; and backface-visibility: visible;, it's just not the same distinction that the other compliant browsers make. Not at least when coupled with the flip. The flip in others makes the back face the front face, so all goes as planned. In IE 10, the faces don't exchange, so you see only the obverse of the front face.