3D Hover Text Effect?

Question

I found this cool javascript/css effect to create a 3D cube roller effect when hovering over links. The problem is when I try to implement it I can't get it to work (perhaps my noobish javascript skills).

This is the effect:

http://jsfiddle.net/hakim/Ht6Ym/

and this is my style sheet:

and my site:

http://goo.gl/1KbHb

The JS I used was:

<script type='text/javascript'>

    var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined || 
                                document.body.style['MozPerspective'] !== undefined;

    function linkify( selector ) {
        if( supports3DTransforms ) {

            var nodes = document.querySelectorAll( selector );

            for( var i = 0, len = nodes.length; i < len; i++ ) {
                var node = nodes[i];

                if( !node.className || !node.className.match( /roll/g ) ) {
                    node.className += ' roll';
                    node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
                }
            };
        }
    }

    linkify( 'a' ); 
    </script>

Answer 1

Delete 2 last line of js code ( linkify( 'a' ); ) and rewrite that. It's problem of jsfiddle and all site like this [ even StackOverFlow ]. There is some hidden unicode character in there that make function call illegal.

Answer 2

I did the same with just pure css. Read the tutorial :- http://www.howtokickblogger.com/2012/11/post-links-hover-effect.html

Demo > http://bit.ly/14AHwcc

Have Fun :)