界面显示：
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css3-纹理背景及3D图制作</title><style>body{background-color: #ddeeff;/*CSS3制作纹理背景*/background-image: radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%),radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%);background-position: 0 0, 40px 40px;background-size: 80px 80px;}.wrapper{width: 50%;float: left;}.cube{font-size: 4em;width: 2em;margin: 1.5em auto;/*css3 3D图*/transform-style: preserve-3d;transform: rotateX(-40deg) rotateY(32deg);}.side{position: absolute;width: 2em;height: 2em;background: rgba(255,99,71,0.6);border: 1px solid rgba(0,0,0,0.5);color: #fff;text-align: center;line-height: 2em;}.front{transform: translateZ(1em);}.bottom{transform: rotateX(-90deg) translateZ(1em);}.left{transform: rotatey(-90deg) translateZ(1em);}.right{transform: rotateY(90deg) translateZ(1em);}.top{transform: rotateX(90deg) translateZ(1em);}.back{transform:rotateY(-180deg) translateZ(1em);}.w2{perspective: 1000px;}.w1{perspective: 100px;}</style></head><body><div class="wrapper w2"><div class="cube"><div class="side front">1</div><div class="side back">6</div><div class="side right">4</div><div class="side left">3</div><div class="side top">5</div><div class="side bottom">2</div></div></div><div class="wrapper w1"><div class="cube"><div class="side front">1</div><div class="side back">6</div><div class="side right">4</div><div class="side left">3</div><div class="side top">5</div><div class="side bottom">2</div></div></div></body></html>
