3d漂浮动画js代码

3D漂浮动画是一种常见的网页特效，通过JavaScript和CSS3的3D变换属性来实现。以下是一个简单的3D漂浮动画的示例代码：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Floating Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scene">
        <div class="cube">
            <div class="cube__face cube__face--front">Front</div>
            <div class="cube__face cube__face--back">Back</div>
            <div class="cube__face cube__face--right">Right</div>
            <div class="cube__face cube__face--left">Left</div>
            <div class="cube__face cube__face--top">Top</div>
            <div class="cube__face cube__face--bottom">Bottom</div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.scene {
    width: 200px;
    height: 200px;
    perspective: 600px;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
}

.cube__face {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid black;
    line-height: 200px;
    text-align: center;
    font-size: 24px;
    color: white;
    background: rgba(0, 0, 255, 0.7);
}

.cube__face--front  { transform: translateZ(100px); }
.cube__face--back   { transform: rotateY(180deg) translateZ(100px); }
.cube__face--right  { transform: rotateY(90deg) translateZ(100px); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top    { transform: rotateX(90deg) translateZ(100px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); }

@keyframes rotate {
    from { transform: rotate3d(0, 0, 0, 0deg); }
    to { transform: rotate3d(1, 1, 1, 360deg); }
}

JavaScript部分（script.js）

// 这里可以添加一些交互逻辑，例如鼠标控制旋转等
document.addEventListener('mousemove', (event) => {
    const scene = document.querySelector('.scene');
    const x = event.clientX / window.innerWidth - 0.5;
    const y = event.clientY / window.innerHeight - 0.5;
    scene.style.transform = `rotateY(${x * 50}deg) rotateX(${y * 50}deg)`;
});

基础概念

3D变换：CSS3提供了transform属性，可以实现元素的3D旋转、缩放和平移。
动画：通过@keyframes定义动画的关键帧，并使用animation属性应用到元素上。

优势

视觉吸引力：3D效果能显著提升用户体验，使网页更加生动。
交互性：结合JavaScript可以实现更复杂的交互效果。

类型

旋转动画：如上述示例中的立方体旋转。
平移动画：元素在3D空间中的移动。
缩放动画：元素的大小变化。

应用场景

产品展示：3D模型展示产品的各个角度。
游戏界面：增强游戏的沉浸感。
广告宣传：吸引用户注意力的动态广告。

可能遇到的问题及解决方法

性能问题：复杂的3D动画可能导致页面卡顿。
- 解决方法：优化动画，减少不必要的计算；使用requestAnimationFrame代替setTimeout或setInterval。

兼容性问题：不同浏览器对3D变换的支持程度不同。
- 解决方法：使用前缀确保兼容性，或者使用Polyfill库。
动画不流畅：可能是由于重绘和回流导致的。
- 解决方法：尽量减少DOM操作，使用CSS3硬件加速（如translate3d）。

通过以上代码和解释，你应该能够实现一个基本的3D漂浮动画，并理解其背后的原理和应用场景。

页面内容是否对你有帮助？

有帮助

没帮助

向下滚动页面时，WebGL 3D动画会停止

、

我用VantaJS.org向页面添加了一个WebGL 3D动画，我已经完全编写了与官方示例相同的代码，但是一旦我向下滚动页面，3D动画就会停止。你可以在这里查看演示：https://lovage.io/3d和我的代码如下： <!DOCTYPE html> <head> <title>

浏览 13提问于2020-01-16得票数 0

1回答

几天来，我一直在为一个项目玩ThreeJs，现在我正在尝试渲染动画3D模型。由于我在3D设计/兼容性方面没有背景，所以我不能在这个框架中得到关于不同加载器的所有权衡。这个文件是一个散列，其中键是三个属性，包括包含morphTargets作为数组的verticles值(我想这些是关键帧)，它和faces数组一起用于从初始的verticle数组中“动画”，就像循环一样。经过几个小时的调查，我想知道作者如何结束创建这个flamingo.js-like文件，以及基于不同的3D模型在自己

浏览 1提问于2018-07-17得票数 0

回答已采纳

1回答

将.gLTF动画导入THREE.js

、、

我用搅拌器创建了一个简单动画的3D对象，然后我将其导出为.gLTF文件，我试图导入到THREE.js，但我只能导入3D对象，但无法加载动画，我如何加载动画到Three.js？

浏览 130提问于2019-10-02得票数 1

2回答

当我添加刚体时，动画会让玩家浮起来。团结中

、

我试图播放动画，但每当我添加刚体，球员开始漂浮在空气中的恒定值(3.5Y)。ATM机上没有任何脚本。我试图删除解决问题的刚体，但我需要它，所以删除rb不是一种选择。重力值是正常的，其他动画来自mixamo (我没有做动画)。

浏览 15提问于2022-11-28得票数 0

回答已采纳

2回答

为什么"-webkit-transform-style: preserve-3d;“会使一些div消失？

、、、

下面的代码应该显示一个标题栏、一个脚注栏和一个图像，但是由于某些原因，我一添加.div1 { -webkit-transform-style: preserve-3d; }就只能得到标题栏。我的页面代码是： <head> <style> body {

浏览 0提问于2012-05-25得票数 7

回答已采纳

1回答

理解translateZ在三维计算中的应用

、、

我刚刚浏览了odoeter.js的源代码，并看到了以下代码行： <div style="-webkit-transform: translateZ(

浏览 5提问于2015-06-29得票数 0

回答已采纳

2回答

jQuery移动动画的替代方案

、、

我一直在阅读使用CSS3是更好的动画，因为它的硬件加速，但我写这篇文章，希望有一个更好的方式来实现动画在Phonegap或CSS3是最好的？

浏览 13提问于2013-09-03得票数 2

回答已采纳

3回答

需要jQuery旋转木马

、

我希望能够在3D旋转木马中显示图像的动态列表，缩略图在空间中“浮动”。我找到了一个旋转木马，但图像是一个普通的圆形。我需要的图像是交错的，并弹出到前面时，点击。

浏览 0提问于2011-03-31得票数 0

回答已采纳

2回答

Three.js示例-如何处理它们

、、

我一直在学习Three.js，我偶然发现了Nat Geo的这些例子。我想知道是否有人知道如何让滚轮控制动画的进度，以及如何将其与网站的常规外观混合在一起……在第一个例子中，webgl元素似乎是在后台，普通的html元素漂浮在它上面，但我不明白他们是如何为它的动画计时的。

浏览 1提问于2018-05-25得票数 0

2回答

再现时间轴的动画效果，类似于Google plus ios应用程序中的动画效果

、、、、

我对Google Plus iOS应用程序中时间轴上的瓷砖的3D外观动画感到非常困惑。我正在做它，但我不能找到成功地创建一个完美的3D动画的对象。我有一些关于UIView元素的块动画的简单知识。但我不知道如何应用3D过渡。我找到了，但它是针对安卓的，答案是针对js的。类似于这个的东西。

浏览 1提问于2013-01-07得票数 1

回答已采纳

1回答

我的角色在加入太空舱对撞机后悬挂在空中

、

胶囊对撞机在改变模型的部分后不自动调整，比如在动画模型时，还是在模型动画后不改变的固定对撞机？📷 📷

浏览 0提问于2016-08-14得票数 -1

6回答

适用于WebGL的酷应用程序？

、、

我立即想到的应用程序是基于web的3D第一人称射击，并以AJAX作为交流的基础。你能为这项技术想出其他很酷的应用吗？

浏览 0提问于2009-08-05得票数 4

1回答

如何制作cube Three.js的浮动特效

、、

所以我试着在three.js中做一个盒子几何浮点，我试着用setTimeout来做，但是不起作用，下面是我试过的。function(){ }, 10000); } 它只会上下移动，看起来不像是漂浮的如何为立方体制作浮动动画？

浏览 50提问于2021-10-31得票数 3

回答已采纳

1回答

用three.js组织html5 webgl画布动画中的对象

、、、、

我想画一只3D猫(带动画)，它只不过是一堆3D对象--椭圆体、金字塔、球体等。我有两个问题：2)在动画整个猫的时候，我应该为每个对象定义一个动画函数吗？

浏览 1提问于2012-02-15得票数 0

回答已采纳

1回答

如何在Adobe Acrobat Reader 2017中使用Javascript访问3d pdf格式的对象？

、、、

我有一个3D PDF格式的对象，我需要通过以不同的角度对3d模型对象进行动画处理，将该对象保存为图像。使用https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/js_3d_api_reference.pdf，我试图在Javascript中访问对象并对其进行动画处理，但我无法获得3d模型对象本身，有人能在这方面帮助我吗？

浏览 31提问于2019-02-12得票数 0

1回答

如何在Three.js中操纵混血角色的动画？

、、、

他们有没有three.js上的包装器，可以帮助在人类角色中构建新的运动动画？我不想使用Mixamo.com上提供的标准动画。

浏览 4提问于2020-03-24得票数 0

4回答

使用sprites进行iPhone开发

、、、

我希望它是3d的，但我想使用OpenGL而不是OpenGL来做这件事(我想这会更容易，因为我不知道sprites )。我正在考虑简单地将精灵层叠在彼此之上，并改变它们的大小，以获得3d的错觉。

浏览 2提问于2009-07-01得票数 3

回答已采纳

1回答

如何创建svg框打开动画？

、、

看上去“坏了”。正确元素的转换来源是不合适的。我试着把这个盒子做成“实心”，但它散开了。 animation: open_right 1s linear infinite;} transform-origin: 0% 50%; animation-direction: alternate;@keyframes open_right{ 0%

浏览 6提问于2016-07-02得票数 0

回答已采纳

1回答

在HTML中旋转瓶子图像

、、、、

仅仅掩蔽瓶盖上的标签可能不是一个好的选择，因为它需要"3d“才能看起来自然。

浏览 4提问于2017-01-27得票数 2

2回答

使HTML对Three.js内容可单击

、、、、

我正在用Three.js中的移动对象制作动画。在这个动画中，我创建一个文本气泡，当一个对象被点击，它有一个"X“按钮来关闭它。但是，如果x按钮覆盖了来自Three.js的3D对象，则该按钮将被完全忽略，而3D对象将被单击。我怎样才能避免这种情况，而让这个HTML内容始终占据优先权呢？我正在使用光线投射来检测我的3D对象的点击，如果这是有帮助的。我已经试过给按钮一个更高的z阶，但是这不起作用。而且，要清楚的是，在视觉上HTML内容在3D对象之上

浏览 7提问于2021-12-28得票数 0

回答已采纳

点击加载更多