H5 立方体小程序

最新推荐文章于 2025-05-19 00:12:11 发布

原创最新推荐文章于 2025-05-19 00:12:11 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5

H5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用HTML5和CSS3实现一个简单的3D立方体效果。通过设置不同的旋转角度和透明背景颜色，创建出六个不同颜色的立方体面，并通过关键帧动画使其连续旋转。

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

H5实现六面体的小程序

在许多网页上都有3d的效果

本次我们就用div+css做出立方体3D的效果

效果图

立方体.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5立方体</title>
<link rel="stylesheet" href="lifangti.css">
</head>
<body>
<div>
<main>
<div class="front"> 1 </div>
<div class="second"> 2 </div>
<div class="third">  3</div>
<div class="four"> 4 </div>
<div class="fif"> 5 </div>
<div class="sex"> 6 </div>
</main>
</div>
</body>
</html>

css样式表

lifangti.css

html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
background: radial-gradient(ellipse,#ebebeb,#000000);
/*弹性布局*/
display: flex;
/*水平方向居中*/
justify-content: center;
/*水平方向向右对齐
justify-content: flex-end;
水平方向向左对齐
justify-content: flex-start;*/
/*竖直方向:居中*/
align-items: center;
}
div{
width: 300px;
height: 300px;
/*border: 1px solid red;*/
/*视角与3d元素之间的距离*/
perspective: 900px;
/*视角查看的基本位置,默认值50%,50%/*/
perspective-origin: 50% 50%;
}
main{
width: 100%;
height: 100%;
/*border: 1px solid yellow;*/
transform:  translateZ(-150px);
/*保留3D元素的转化效果*/
transform-style: preserve-3d;
animation: rotate 6s linear infinite;
}
@keyframes rotate{
0%{
transform: rotateX(0) rotateY(0);  
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}

}
/*main>div 代表选中main标签背部的直系div子元素*/
main div{
width: 100%;
height: 100%;
position: absolute; 
color: white;
text-align: center;
line-height: 300px;
font-size: 88px;
}
.front{
background: rgba(22, 222, 0, 0.5);
transform: translateZ(150px);
}
.second{
background: rgba(222, 22, 0, 0.5);
transform: translateZ(-150px);


}
.third{
    background: rgba(33, 33, 333, 0.5);
transform: rotateY(90deg) translateZ(150px);


}
.four{
    background: rgba(33, 333, 333, 0.5);
transform: rotateY(90deg) translateZ(-150px);
}
.fif{
background: rgba(66,11,11,0.5);
transform: rotateX(90deg) translateZ(-150px);
}
.sex{
background:rgba(222, 3, 444, 0.5);
transform: rotateX(90deg) translateZ(150px);
}