CSS画正方体?

CSS画正方体?,第1张

CSS画正方体?
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>perspective</title><style>.wrapper{width: 50%;float: left;}.cube{font-size: 4em;width: 2em;margin: 1.5em auto;transform-style:preserve-3d;transform:rotateX(-35deg) rotateY(30deg);}.side{position: absolute;width: 2em;height: 2em;background: rgba(255,99,71,0.6);border: 1px solid rgba(0,0,0,0.5);color: white;text-align: center;line-height: 2em;}.front{transform:translateZ(1em);}.bottom{transform:rotateX(-90deg) translateZ(1em);}.top{transform:rotateX(90deg) translateZ(1em);}.left{transform:rotateY(-90deg) translateZ(1em);}.right{transform:rotateY(90deg) translateZ(1em);}.back{transform:translateZ(-1em);}</style></head><body><div ><div ><div >1</div><div >6</div><div >4</div><div >3</div><div >5</div><div >2</div></div></div><div ><div ><div >1</div><div >6</div><div >4</div><div >3</div><div >5</div><div >2</div></div></div></body></html>

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/4887376.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-11-11
下一篇2022-11-12

发表评论

登录后才能评论

评论列表(0条)

    保存