使用 CSS3 和 JavaScript 制作链接反转 3D 动画

发布于 2018-11-08 22:42:58 字数 2382 浏览 1603 评论 0

使用 CSS3 和 JavaScript 制作链接反转 3D 动画,CSS 和 JavaScript 技巧用来创建顶层的悬浮效果,使用 transfomr-origin 和 transform-style 属性及其 3D 属性。

使用 CSS3 和 JavaScript 制作链接反转 3D 动画

CSS 代码

.roll {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
}

.roll span {
    display: block;
    position: relative;
    padding: 0 2px;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}

.roll:hover span {
    background: #111;
    -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}

.roll span:after {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;
    color: #fff;
    background: hsl(206, 80%, 30%);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
    -moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}

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 = '' + node.innerHTML + '';
            }
        };
    }
}
linkify( 'a' );

效果预览:over-the-top-hover-effect

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。