如何解决如何旋转 HTML 3D 场景?
我想用正方形制作一个 3d 场景,然后在没有插件的情况下四处移动
然后我开始观看一个关于 html 和 3d 图形的视频,我做了这个,我已经被困了 2 天试图为场景设置动画,我已经尝试使用 javascript 来检测鼠标或键盘,但我无法做到工作,我是 css、html 和 java 的新手
<!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 -->
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。