H5 立方体小程序

来源：互联网发布：为什么登录淘宝就闪退编辑：程序博客网时间：2024/06/05 08:54

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);}

1 0