求纯 CSS 实现的标签云球源码。
##3D 魔方效果展示**效果图:**
[图片1: 3D 球体标签云](https://juejin.cn/post/7067079870076944392)
[图片2: 3D 小魔方](https://linux.do/uploads/default/original/3X/c/5/c5c7c9db90a4e4d52960f8dbd7dfb6f8cec18dbd.jpeg)
**参考效果:**
[链接: 3D 魔方效果](https://nxysj.top/local-seo-optimization-guide/)
**代码示例:**
```html
.eyes {
perspective: 20em;
}
.box {
transform-style: preserve-3d;
width: 5em;
height: 5em;
margin: 5em auto;
animation: zhuan 5s ease infinite;
animation-timing-function: linear;
}
.box div {
width: 5em;
height: 5em;
opacity: 0.8;
transition: all 1.5s ease 0s;
position: absolute;
}
/* 调整位置，制作成一个六边形 */
.box .div1 {
background: #4081ec;
transform: translateZ(2.5em);
}
/* ... 其他 div 样式 ... */
@keyframes zhuan {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
/* 给正方体添加一个hover效果 */
.box:hover .div1 {
transform: translateZ(3.5em);
}
/* ... 其他 div hover 样式 ... */
```
页:
[1]