Question

我想用正方形制作一个 3d 场景，然后在没有插件的情况下四处移动

然后我开始观看一个关于 html 和 3d 图形的视频，我做了这个，我已经被困了 2 天试图为场景设置动画，我已经尝试使用 javascript 来检测鼠标或键盘，但我无法做到工作，我是 css、html 和 java 的新手

我使用 Visual Studio 代码

<!DOCTYPE html>

<html>
    <head>
        <title>engine 1A</title>
        <style>
                html, body {margin: 0; padding: 0;}
                body {background: black; overflow: hidden;}

                #scene
                {
                    perspective: 800px;
                    transition-duration: 5s;
                    transition-delay: 2s;
                    transition-timing-function: linear;
                    transition-property: width;
                }
                @keyframes roll {
                        from {
                            transform:rotateX(0) rotateY(0);
                            }

                        to {
                            transform:rotateX(360) rotateY(360);
                            }
                        }
                #mainD
                {
                    width: 500px;
                    height: 500px;
                    margin: 200px auto;
                }

                #boxD
                {
                    width: 500px;
                    height: 500px;
                }

                #boxD div
                {
                    position: absolute;
                    border: 1px solid white;
                    width: 500px;
                    height: 500px;
                    transform-style: preserve-3d;
                }
                
                #ZB
                {
                    transform: translateZ(250px) rotateY(180deg)
                }
                #ZP
                {
                    transform: translateZ(-250px)
                }
                #XB
                {
                    transform: translateX(-250px) rotateY(90deg)
                }
                #XP
                {
                    transform: translateX(250px) rotateY(-90deg)
                }
                #YB
                {
                    transform: translateY(-250px) rotateX(90deg)
                }
                #YP
                {
                    transform: translateY(250px) rotateX(-90deg)
                }
                
        </style>
    </head>
    <body>
        <div id="scene">
            <div id="mainD">
                <div id="boxD">
                    <div id="ZB"></div>
                    <div id="ZP"></div>
                    <div id="XP"></div>
                    <div id="XB"></div>
                    <div id="YP"></div>
                    <div id="YB"></div>
                </div>
            </div>
        </div>
    </body>
</html>

<!-- begin snippet: js hide: false console: true babel: false -->

如何旋转 HTML 3D 场景？

0 个答案: