旋转魔方.html

最新推荐文章于 2025-03-24 09:57:36 发布

一牧.log

最新推荐文章于 2025-03-24 09:57:36 发布

阅读量974

点赞数 31

分类专栏： web 文章标签： html css3 css javascript

本文链接：https://blog.csdn.net/qq_55879366/article/details/136459306

版权

本文介绍了如何使用HTML、CSS和JavaScript创建一个可交互的魔方模型，用户可以自定义图片并实现3D旋转。通过修改背景图片URL和CSS样式，实现了不同图片在六个面的动态切换和缩放效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

旋转魔方.html

编码：HTML+CSS+JavaScript

介绍

1.简介：旋转魔方，可以自己将图片放在魔方的六个面，每个面是九宫格形状
2.使用：下载即可打开，但是看不到图片，需要在此HTML网页文件同一级目录下创建图片文件夹存放图片（具体路径自定义修改）
3.修改：打开网页编辑器，代码行数164行如下：

divs.style.cssText = "width:100px;height:100px;border: 1px solid #fff;box-sizing:border-box;position:absolute;background-image:url(img/c"+n+".jpg);background-size:300px 300px;";

需要修改 background-image:url(img/c"+n+".jpg); 此背景图片信息，改为自己的图片路径就行
注意：六张图片需要根据顺序排列才可以遍历哦！！！

效果
魔方静态图片展示1

CODE


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>魔方</title>
	<style type="text/css">
			*{
     margin: 0px;
				padding: 0px;}
				body{
     background-color: rgba(223,74,38,0.7);}
			.container{
     
				width: 300px;
				height: 300px;
			
				margin: 200px auto;
				/* 视图距离*/
				perspective:2000px;
			}
			.box{
     
				width: 300px;
				height: 300px;
				/* 控制子元素保持3D转换 */
				transform-style:preserve-3d;

				/* 测试代码	 */
				/* transform:rotateX(45deg) rotateY(45deg); */
				animation:so 20s linear infinite;/* 匀速一直转 */
			}
			@keyframes so{
     
				0%{
     
					transform:rotateX(0deg) rotateY(0deg)