找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS3之3D效果_滚动

2019-01-08 分类：CSS 阅读(1175) 评论(0)
前端转游戏开发
前端 打地鼠小游戏开发
游戏前端开发技能

代码片段 1

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <meta name=”author” content=”” />
        <meta name=”keywords” content=”” />
        <meta name=”description” content=”” />
        <title>滚吧</title>
        <style type=”text/css”>
            html,
            body {
                height: 100%;
            }
            section {
                height: 100%;
                perspective: 900px;
                -webkit-perspective: 900px;
                -moz-perspective: 900px;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
            }
            .box {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                width: 100px;
                height: 100px;
                margin: auto;
                transform-style: preserve-3d;
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
            }
            .box > div {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 100px;
                transform-style: preserve-3d;
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
            }
            .box > div:nth-child(1) {
                background-color: #ccc;
                transform: translate3d(0, 0, -50px);
                -webkit-transform: translate3d(0, 0, -50px);
                -moz-transform: translate3d(0, 0, -50px);
            }
            .box > div:nth-child(2) {
                background-color: #f00;
                top: -50%;
                transform: rotateX(90deg);
                -webkit-transform: rotateX(90deg);
                -moz-transform: rotateX(90deg);
            }
            .box > div:nth-child(3) {
                background-color: #0f0;
                left: 50%;
                transform: rotateY(90deg);
                -webkit-transform: rotateY(90deg);
                -moz-transform: rotateY(90deg);
            }
            .box > div:nth-child(4) {
                background-color: #00f;
                top: 50%;
                transform: rotateX(-90deg);
                -webkit-transform: rotateX(-90deg);
                -moz-transform: rotateX(-90deg);
            }
            .box > div:nth-child(5) {
                background-color: #ff0;
                left: -50%;
                transform: rotateY(-90deg);
                -webkit-transform: rotateY(-90deg);
                -moz-transform: rotateY(-90deg);
            }
            .box > div:nth-child(6) {
                background-color: #0ff;
                transform: translate3d(0, 0, 50px);
                -webkit-transform: translate3d(0, 0, 50px);
                -moz-transform: translate3d(0, 0, 50px);
            }
        </style>
    </head>
    <body>
        <section>
            <div class=”box”>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </section>
        <script>
            //<![CDATA[
            var run =
                    window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame,
                box = document.querySelector(‘.box’),
                rx = 0,
                ry = 0,
                px = 0,
                py = 0,
                tmr = 0
            document.addEventListener(
                ‘mousemove’,
                function(e) {
                    var ex = e.clientX,
                        ey = e.clientY,
                        rect = box.getBoundingClientRect(),
                        bx = rect.left + rect.width * 0.5,
                        by = rect.top + rect.height * 0.5
                    px = ex == bx ? 0 : ex > bx ? -1 : 1
                    py = ey == by ? 0 : ey > by ? -1 : 1
                },
                false,
            )
            ;(function() {
                rx = (rx + px) % 360
                ry = (ry + py) % 360
                box.style.mozTransform = box.style.webkitTransform = box.style.transform =
                    ‘rotateX(‘ + rx + ‘deg) rotateY(‘ + ry + ‘deg)’
                run(arguments.callee)
            })()
            //]]>
        </script>
    </body>
</html>
游戏编程开发是前端还是后端
游戏开发属于前端
前端游戏开发的背景
赞(0)
前端开发者 » 前端开发CSS3之3D效果_滚动
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论