极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

# 如何使用 css 写一个有 3D 效果的立方体

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 179 (opens new window)

Author

回答者: lihan1k (opens new window)

`

1
2
3
4
5
6

` `* { margin: 0; padding: 0; }

body { perspective: none; perspective-origin: 50% 50%; }

.warp { width: 500px; height: 500px; margin: 100px auto; position: relative; transform-style: preserve-3d; transform: rotateX(45deg) rotateY(45deg); animation: play 5s linear infinite; }

.box { width: 200px; height: 200px; border: 2px solid #ccc; text-align: center; line-height: 200px; font-size: 150px; font-weight: bold; color: #fff; position: absolute; top: 150px; left: 150px; }

.box1 { background: rgba(135,135,135,.3); transform: rotateY(90deg) translateZ(100px); }

.box2 { background: rgba(135,0,255,.3); transform: rotateY(90deg) translateZ(-100px); }

.box3 { background: rgba(255,125,125,.3); transform: rotateX(90deg) translateZ(-100px); }

.box4 { background: rgba(125,255,125,.3); transform: rotateX(90deg) translateZ(100px); }

.box5 { background: rgba(30,150,189,.3); transform: translateZ(100px); }

.box6 { background: rgba(169,150,189,.3); transform: translateZ(-100px); }

@keyframes play { from{ transform: rotateX(0) rotateY(0) rotateZ(0);} to {transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg);} }`

Last Updated: 11/27/2021, 10:11:48 AM