[已解决]怎么实现3D几何体旋转效果？

琅琊王朝 · 发表于 2023-10-2 21:22:20

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由琅琊王朝于 2023-10-2 21:31 编辑

rt
就像https://mattboldt.com/的背景

最佳答案

月排行榜 / 总排行榜

陶远航

2023-10-2 21:54:42

算了，懒得搞了，我刚才直接去找网站的js没找到

跳转到最佳答案楼层

isdkz · 发表于 2023-10-2 21:22:42

要实现3D几何体旋转效果，可以使用CSS3中的transform属性结合JavaScript来实现。具体步骤如下：

1. 首先，在HTML中创建一个div元素，用于包裹几何体。

2. 使用CSS3的transform属性，设置元素的rotateX、rotateY、rotateZ属性，分别控制元素在x轴、y轴、z轴上的旋转角度。

3. 在JavaScript中，使用定时器setInterval()函数来不断更新元素的旋转角度，从而实现旋转效果。

下面是一个简单的示例代码：

HTML代码：

<div class="cube"></div>

CSS代码：

.cube { width: 100px; height: 100px; background-color: red; transform-style: preserve-3d; transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); transition: transform 1s ease-in-out; }

JavaScript代码：

var cube = document.querySelector('.cube'); var angle = 0; setInterval(function() { angle += 1; cube.style.transform = 'rotateX(' + angle + 'deg) rotateY(' + angle + 'deg) rotateZ(' + angle + 'deg)'; }, 10);

以上代码会创建一个红色的立方体，并不断地在x轴、y轴、z轴上旋转。你可以根据自己的需求，修改代码中的旋转角度、颜色等属性，来实现不同的3D几何体旋转效果。

liuhongrun2022 · 发表于 2023-10-2 21:22:52

那个网站的背景效果看起来非常酷炫，是通过js和css实现的。

具体实现方式是在页面中加入一个全屏的div元素，并设置其 position、top、left、width、height、background 等属性。然后在 js 中利用 requestAnimationFrame() 方法不断更新该 div 的 backgroundPosition 属性，从而实现背景图片的滚动效果。

你可以参考以下代码实现这个效果：

HTML：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Background Animation</title>    <link rel="stylesheet" href="style.css"></head><body>    <div class="bg-image"></div>    <div class="content">        <h1>Hello, World!</h1>        <p>This is a cool background animation.</p>    </div>    <script src="main.js"></script></body></html>

CSS：

body {    margin: 0;    padding: 0;}.bg-image {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: url("bg.jpg") repeat-x;    z-index: -1;    animation: scrollBg 60s linear infinite;}@keyframes scrollBg {    0% {        background-position: 0 0;    }    100% {        background-position: -5000px 0;    }}.content {    position: relative;    width: 100%;    height: 100vh;    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    text-align: center;}h1 {    font-size: 5rem;    margin-bottom: 10px;}p {    font-size: 2rem;}

JavaScript：

const bgImage = document.querySelector('.bg-image');function scrollBackground() {  const distance = window.pageYOffset * -1;  bgImage.style.backgroundPosition = [b]0 ${distance}px[/b];  requestAnimationFrame(scrollBackground);}scrollBackground();

在这个例子中，我们使用了固定定位的 div 元素，并使其充满整个屏幕。然后，我们将背景图片设置为该 div 的 background，并使用 CSS 动画循环滚动。

在 JavaScript 中，我们使用 requestAnimationFrame() 方法来不断更新背景图片的位置，从而实现滚动效果。

希望这对你有所帮助！请随时提问，我们乐意为您解答。

此内容为ChatGPT（AI）回答，若有错误多多包涵，如果对你有帮助，请设置一个最佳答案！

Mike_python小 · 发表于 2023-10-2 21:23:29

你好！实现3D几何体旋转效果可以通过使用CSS 3D变换和动画来实现。下面是一个简单的示例代码，帮助您理解如何实现：

[/code]html
<!DOCTYPE html>
<html>
<head>
<style>
      .box {
         width: 200px;
         height: 200px;
         background-color: red;
         position: relative;
         transform-style: preserve-3d;
         animation: rotate 5s infinite linear;
      }

      @keyframes rotate {
         from {
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
         }
         to {
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
         }
      }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
[/code]

在上述代码中，我们创建了一个宽高为200px的div元素，并设置背景颜色为红色。通过将其position属性设置为relative，我们可以在其内部进行3D变换。

通过应用transform-style: preserve-3d;样式，我们告诉浏览器该元素及其子元素将应用3D变换。然后，我们通过animation属性设置了一个旋转动画，时长为5秒，并且无限循环播放，使用linear作为动画的速度曲线。

在@keyframes规则中，我们定义了两个关键帧，从初始位置到最终位置的旋转效果。通过设置transform: rotateX()、rotateY()和rotateZ()，我们实现了绕X轴、Y轴和Z轴的旋转。

您可以将这段代码复制到HTML文件中并在浏览器中运行，您会看到一个红色的盒子以旋转的方式展示。

希望这个示例对您有所帮助！如果您有任何其他问题，请随时提问。

球一个最佳答案谢谢啦！这对我非常重要！

陶远航 · 发表于 2023-10-2 21:23:43

要在网页中实现 3D 几何体旋转效果，可以使用 CSS3 中的 transform 属性。通过设置 transform 属性中的 rotateX()、rotateY()、rotateZ() 等函数，可以对 HTML 元素进行不同轴向的旋转操作。

以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3D Transform Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;  /* 隐藏滚动条 */
        }

        .container {
            width: 100vw;
            height: 100vh;
            perspective: 1000px;  /* 远近程度为 1000px */
            background-color: #333;
        }

        .cube {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            margin-top: -100px;
            margin-left: -100px;
            transform-style: preserve-3d;
            animation: rotate 6s linear infinite;
        }

        .face {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid #fff;
            line-height: 200px;
            text-align: center;
            font-size: 36px;
            color: #333;
        }

        .front {
            transform: translateZ(100px);
        }

        .back {
            transform: translateZ(-100px) rotateY(180deg);
        }

        .right {
            transform: translateX(100px) rotateY(90deg);
        }

        .left {
            transform: translateX(-100px) rotateY(-90deg);
        }

        .top {
            transform: translateY(-100px) rotateX(90deg);
        }

        .bottom {
            transform: translateY(100px) rotateX(-90deg);
        }

        @keyframes rotate {
            from { transform: rotateX(0) rotateY(0) rotateZ(0); }
            to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="cube">
            <div class="face front">Front</div>
            <div class="face back">Back</div>
            <div class="face right">Right</div>
            <div class="face left">Left</div>
            <div class="face top">Top</div>
            <div class="face bottom">Bottom</div>
        </div>
    </div>
</body>
</html>

在上面的示例代码中，我们使用 CSS3 的 perspective 属性来设置透视视图，让元素在远近程度上有所变化，从而形成 3D 效果。接着，我们创建一个容器元素 .container 和一个立方体元素 .cube， .cube 包含六个面元素 .face，每个面都是一个矩形，并且面的位置和旋转角度通过 transform 属性进行设置。

我们还使用 CSS3 的 animation 属性来创建一个旋转动画，使立方体元素沿着 x、y、z 轴不停旋转。这样，当用户打开该网页时，就可以看到 3D 效果的立方体在不停旋转了。

你可以将上述代码复制到文本编辑器中，并将文件后缀名保存为 .html，然后在浏览器中打开该 HTML 文件，就可以看到 3D 效果的立方体了。
如果问题已经解决，请设置最佳答案

陶远航 · 发表于 2023-10-2 21:27:23

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>3D Rotating Cube</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建立方体几何体和材质
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

    // 创建立方体并添加到场景
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 动画循环
    function animate() {
      requestAnimationFrame(animate);

      // 更新立方体旋转
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      // 渲染场景和相机
      renderer.render(scene, camera);
    }

    // 开始动画循环
    animate();

    // 调整窗口大小
    window.addEventListener('resize', function () {
      const width = window.innerWidth;
      const height = window.innerHeight;
      renderer.setSize(width, height);
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
    });
  </script>
</body>
</html>

琅琊王朝 · 发表于 2023-10-2 21:29:07

陶远航发表于 2023-10-2 21:27

人类？

陶远航 · 发表于 2023-10-2 21:31:13

琅琊王朝发表于 2023-10-2 21:29
人类？

嗯，你看看可以吗

琅琊王朝 · 发表于 2023-10-2 21:32:36

陶远航发表于 2023-10-2 21:31
嗯，你看看可以吗

e，不太可以，如果非要选的话肯定选你，但你能看下人家网站再说嘛？

陶远航 · 发表于 2023-10-2 21:37:34

琅琊王朝发表于 2023-10-2 21:32
e，不太可以，如果非要选的话肯定选你，但你能看下人家网站再说嘛？

我添加了阴影效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>3D Rotating Cube with Shadows</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    document.body.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    cube.castShadow = true;
    scene.add(cube);

    const light = new THREE.PointLight(0xffffff, 1, 100);
    light.position.set(10, 10, 10);
    light.castShadow = true;
    scene.add(light);

    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }

    animate();

    window.addEventListener('resize', function () {
      const width = window.innerWidth;
      const height = window.innerHeight;
      renderer.setSize(width, height);
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
    });
  </script>
</body>
</html>

如果还不够接近，我可以继续改...

陶远航 · 发表于 2023-10-2 21:54:42

算了，懒得搞了，我刚才直接去找网站的js没找到

账号		自动登录	找回密码
密码			立即注册