链接3D切换效果

【CSS3】

下载

新闻

文章

链接3D切换效果

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>链接3D切换效果</title>
    <style>
        .reveal{
            padding: 30px;
            background-color: #21fffd
        }
        .roll {
            display: inline-block;
            overflow: hidden;
            font:bold 40px/40px arial;
            text-decoration: none;
            perspective: 400px;
            perspective-origin: 50% 50%;
        }
        .roll span {
            display: block;
            color: red;
            position: relative;
            padding: 0 2px;
            pointer-events: none;

            -webkit-transition: all 400ms ease;
            -moz-transition: all 400ms ease;
            -ms-transition: all 400ms ease;
            transition: all 400ms ease;

            -webkit-transform-origin: 50% 0%;
            -moz-transform-origin: 50% 0%;
            -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;

            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .roll:hover span {
            background-color: rgba(0,0,0,0.5);
            -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
            -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
            -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
            transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
        }
        .roll span:after {
            content: attr(title);
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            padding: 0 2px;
            -webkit-transform-origin: 50% 0%;
            -moz-transform-origin: 50% 0%;
            -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

            -webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
            -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
            -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
            transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
        }
    </style>
</head>
<body>
<div class="reveal">
    <a href="http://www.scscms.com/" class="roll"><span title="SCSCMS">SCSCMS</span></a>
</div>
</body>
</html>

SCSCMS