纯css3实现骰子3D翻转特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯css3实现骰子3D翻转特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html class=''>
<head>
    <title>纯css3实现骰子3D翻转特效</title>
    <style class="cp-pen-styles">
        * {
            margin: 0;
            padding: 0;
        }
        /*
        定义一个三维场景
        */
        #outer {
            /*定义视距*/
            -webkit-perspective: 500px;
            -WebKit-perspective-origin: 50% 50%;
            -moz-perspective: 500px;
            -moz-perspective-origin: 50% 50%;
            overflow: hidden;
        }



        /*定义一个立方体平面的包裹层*/
        #group {
            width: 200px;
            height: 200px;
            position: relative;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            margin: 200px auto;
            -webkit-animation: scroll 8s linear 0s infinite;
            -moz-animation: scroll 8s linear 0s infinite;
        }

        .page {
            width: 200px;
            height: 200px;
            position: absolute;
            border-radius: 20px;
            text-align: center;
            font-weight: bold;
            opacity: 0.5;
            overflow: hidden;
            filter: alpha(opacity=50);
            font-size: 150px;
            word-break: break-all;
            word-wrap: break-word;
            /*background-origin: border-box;*/
            /*background-clip: padding-box;*/
        }

        #page1 {
            background-color: #10a6ce;
            line-height: 100px;
        }

        #page2 {
            background-color: #0073b3;
            -webkit-transform-origin: right;
            -webkit-transform: rotateY(-90deg);
            -moz-transform-origin: right;
            -moz-transform: rotateY(-90deg);
            line-height: 100px;
        }

        #page3 {
            background-color: #07beea;
            -webkit-transform-origin: left;
            -webkit-transform: rotateY(90deg);
            -moz-transform-origin: left;
            -moz-transform: rotateY(90deg);
            line-height: 80px;
        }

        #page4 {
            background-color: #29B4F0;
            -webkit-transform-origin: top;
            -webkit-transform: rotateX(-90deg);
            -moz-transform-origin: top;
            -moz-transform: rotateX(-90deg);
            line-height: 80px;
        }

        #page5 {
            background-color: #6699cc;
            -webkit-transform-origin: bottom;
            -webkit-transform: rotateX(90deg);
            -moz-transform-origin: bottom;
            -moz-transform: rotateX(90deg);
            line-height: 50px;
        }

        #page6 {
            background-color: #10a6ce;
            -webkit-transform: translateZ(-200px);
            -moz-transform: translateZ(-200px);
            line-height: 50px;
        }

        @-moz-keyframes scroll {

            0% {
                -moz-transform: rotateY(0deg) rotateX(0deg);
            }

            50% {
                -moz-transform: rotateY(360deg) rotateX(0deg);
            }

            100% {
                -moz-transform: rotateY(360deg) rotateX(360deg);
            }
        }

        @-webkit-keyframes scroll {

            0% {
                -webkit-transform: rotateY(0deg) rotateX(0deg);
            }

            50% {
                -webkit-transform: rotateY(360deg) rotateX(0deg);
            }

            100% {
                -webkit-transform: rotateY(360deg) rotateX(360deg);
            }
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="group">
            <div class="page" id="page1">
                .
            </div>
            <div class="page" id="page2">
                ..
            </div>
            <div class="page" id="page3">
                ...
            </div>
            <div class="page" id="page4">
                ....
            </div>
            <div class="page" id="page5">
                .....
            </div>
            <div class="page" id="page6">
                ......
            </div>
        </div>
    </div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)