css3 transform 3d 使用html5+css3创建动态旋转的3d立方体

 首页 > 网页特效 > 其他特效 > css3 transform 3d 使用html5+css3创建动态旋转的3d立方体

css3 transform 3d 使用html5+css3创建动态旋转的3d立方体

 2019-01-21  338  收藏  0 赞一个  0 真差劲  0 去评论

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        #experiment {
            -webkit-perspective: 800;
            -webkit-perspective-origin: 50% 200px;
            -moz-perspective: 800;
            -moz-perspective-origin: 50% 200px;
        }

        #cube {
            position: relative;
            margin: 100px auto 0;
            height: 400px;
            width: 400px;
            -webkit-transition: -webkit-transform 2s linear;
            -webkit-transform-style: preserve-3d;
            -moz-transition: -moz-transform 2s linear;
            -moz-transform-style: preserve-3d;
        }

        .face {
            position: absolute;
            height: 360px;
            width: 360px;
            padding: 20px;
            background-color: rgba(50, 50, 50, 0.7);
            font-size: 27px;
            line-height: 1em;
            color: #fff;
            border: 1px solid #555;
            border-radius: 3px;
        }

        #cube .one  {
            -webkit-transform: rotateX(90deg) translateZ(200px);
            -moz-transform: rotateX(90deg) translateZ(200px);
        }

        #cube .two {
            -webkit-transform: translateZ(200px);
            -moz-transform: translateZ(200px);
        }

        #cube .three {
            -webkit-transform: rotateY(90deg) translateZ(200px);
            -moz-transform: rotateY(90deg) translateZ(200px);
        }

        #cube .four {
            -webkit-transform: rotateY(180deg) translateZ(200px);
            -moz-transform: rotateY(180deg) translateZ(200px);
        }

        #cube .five {
            -webkit-transform: rotateY(-90deg) translateZ(200px);
            -moz-transform: rotateY(-90deg) translateZ(200px);
        }

        #cube .six {
            -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
            -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
        }
    </style>
    <script src="http://www.aizhanzhe.com/Public/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
                    prop,
                    el = document.createElement('div');

            for(var i = 0, l = props.length; i < l; i++) {
                if(typeof el.style[props[i]] !== "undefined") {
                    prop = props[i];
                    break;
                }
            }

            var xAngle = 0, yAngle = 0;

            $('body').keydown(function(evt) {
                switch(evt.keyCode) {
                    case 37: // left
                        yAngle -= 90;
                        break;
                    case 38: // up
                        xAngle += 90;
                        break;
                    case 39: // right
                        yAngle += 90;
                        break;
                    case 40: // down
                        xAngle -= 90;
                        break;
                };
                document.getElementById('cube').style[prop] = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
            });
        });
    </script>
</head>
<body>
<div id="experiment">
    <div id="cube">
        <div class="face one">
            One face
        </div>
        <div class="face two">
            Up, down, left, right
        </div>
        <div class="face three">
            Lorem ipsum.
        </div>
        <div class="face four">
            New forms of navigation are fun.
        </div>
        <div class="face five">
            Rotating 3D cube
        </div>
        <div class="face six">
            More content
        </div>
    </div>
</div>
</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

css3 transform 3d 使用html5+css3创建动态旋转的3d立方体

在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果特酷，本人看后，目瞪口呆，值得收藏于参考

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行