HTML5 CSS3 专题 ：诱人的实例 3D展示商品信息，前端开发学习内容

CSS：

.wapper

{

margin: 100px auto 0;

width: 100px;

height: 100px;

-webkit-perspective: 1200px;

font-size: 50px;

font-weight: bold;

color: #fff;

}

.cube

{

position: relative;

width: 100px;

-webkit-transform: rotateX(-40deg) rotateY(32deg);

-webkit-transform-style: preserve-3d;

}

.side

{

text-align: center;

line-height: 100px;

width: 100px;

height: 100px;

background: rgba(255, 99, 71, 0.6);

border: 1px solid rgba(0, 0, 0, 0.5);

position: absolute;

}

.front

{

-webkit-transform: translateZ(50px);

}

.top

{

-webkit-transform: rotateX(90deg) translateZ(50px);

}

.right

{

-webkit-transform: rotateY(90deg) translateZ(50px);

}

<