怎么实现3D几何体旋转效果？
本帖最后由 琅琊王朝 于 2023-10-2 21:31 编辑rt
就像https://mattboldt.com/的背景 要实现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几何体旋转效果。 那个网站的背景效果看起来非常酷炫，是通过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 = 0 ${distance}px;
requestAnimationFrame(scrollBackground);
}
scrollBackground();
在这个例子中，我们使用了固定定位的 div 元素，并使其充满整个屏幕。然后，我们将背景图片设置为该 div 的 background，并使用 CSS 动画循环滚动。
在 JavaScript 中，我们使用 requestAnimationFrame() 方法来不断更新背景图片的位置，从而实现滚动效果。
希望这对你有所帮助！请随时提问，我们乐意为您解答。
此内容为ChatGPT（AI）回答，若有错误多多包涵，如果对你有帮助，请设置一个最佳答案！ 你好！实现3D几何体旋转效果可以通过使用CSS 3D变换和动画来实现。下面是一个简单的示例代码，帮助您理解如何实现：
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>
在上述代码中，我们创建了一个宽高为200px的div元素，并设置背景颜色为红色。通过将其position属性设置为relative，我们可以在其内部进行3D变换。
通过应用transform-style: preserve-3d;样式，我们告诉浏览器该元素及其子元素将应用3D变换。然后，我们通过animation属性设置了一个旋转动画，时长为5秒，并且无限循环播放，使用linear作为动画的速度曲线。
在@keyframes规则中，我们定义了两个关键帧，从初始位置到最终位置的旋转效果。通过设置transform: rotateX()、rotateY()和rotateZ()，我们实现了绕X轴、Y轴和Z轴的旋转。
您可以将这段代码复制到HTML文件中并在浏览器中运行，您会看到一个红色的盒子以旋转的方式展示。
希望这个示例对您有所帮助！如果您有任何其他问题，请随时提问。
球一个最佳答案谢谢啦！这对我非常重要！{:10_254:}{:10_254:}{:10_254:}
要在网页中实现 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 效果的立方体了。
如果问题已经解决，请设置最佳答案 <!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:27
人类？ 琅琊王朝 发表于 2023-10-2 21:29
人类？
嗯，你看看可以吗 陶远航 发表于 2023-10-2 21:31
嗯，你看看可以吗
e，不太可以，如果非要选的话肯定选你，但你能看下人家网站再说嘛？ 琅琊王朝 发表于 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>
如果还不够接近，我可以继续改... 算了，懒得搞了，我刚才直接去找网站的js没找到
页:
[1]