3D悬停文字效果？

Posted 2023-03-06

【中文标题】3D悬停文字效果？

【英文标题】：3D Hover Text Effect?

【发布时间】：2012-10-28 06:57:28

【问题描述】：

我发现这个很酷的 javascript/css 效果可以在将鼠标悬停在链接上时创建 3D 立方体滚轮效果。问题是当我尝试实现它时，我无法让它工作（也许是我的 javascript 技能）。

这是效果：

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

这是我的样式表：

和我的网站：

http://goo.gl/1KbHb

我使用的JS是：

<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>

【问题讨论】：

“无法正常工作”是什么意思？您提供的 js 似乎是 jsfiddle 的精确副本。我什至找不到此 js 已加载到您的网站上。不用说，没有 a 标签包含 roll 类。使用浏览器的开发人员工具找出脚本未加载/运行的原因。

【参考方案1】：

删除 2 最后一行 js 代码 (linkify( 'a' );) 并重写。这是 jsfiddle 和所有类似网站的问题 [甚至 *** ]。里面有一些隐藏的 unicode 字符使函数调用非法。

【参考方案2】：

我对纯 CSS 做了同样的事情。阅读教程：- http://www.howtokickblogger.com/2012/11/post-links-hover-effect.html

演示 > http://bit.ly/14AHwcc

玩得开心:)