在网页里面添加3d效果展示，需要在包裹内容的div wrap上加入perspective 透视属性,其子元素.cube要设置transform-style: preserve-3d;属性来进行3d显示,.cube 的子div需要设置transform的translate和rotate值来进行xyz轴的移动和旋转，以实现3d展示效果.

[caption id=”attachment_356” align=”alignnone” width=”394”] css3 3d图形[/caption]

示例地址: http://www.webdevelopmentmachine.com/rain-css/css3/cube.html

css:

@-webkit-keyframes spin {from {-webkit-transform: rotateY(0)}to {-webkit-transform: rotateY(360deg)}}
@-ms-keyframes spin {from {ms-transform: rotateY(0)}to {ms-transform: rotateY(360deg)}}
@keyframes spin {from {transform: rotateY(0)}to {transform: rotateY(360deg)}}
@-webkit-keyframes spin-vertical {from {-webkit-transform: rotateX(0)}to {-webkit-transform: rotateX(-360deg)}}
@-ms-keyframes spin-vertical {from {ms-transform: rotateX(0)}to {ms-transform: rotateX(-360deg)}}
@keyframes spin-vertical {from {transform: rotateX(0)}to {transform: rotateX(-360deg)}}
.wrap {
-webkit-perspective: 400px;
-webkit-perspective-origin: 50% -150px;
-moz-perspective: 400px;
-moz-perspective-origin: 50% -150px;
-ms-perspective: 400px;
-ms-perspective-origin: 50% -150px;
perspective: 400px;
perspective-origin: 50% -150px;
}

.cube {
position: relative;
width: 100px;
height:200px;
margin: 20px auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-ms-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}

.cube div {
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 30px rgba(125, 125, 125, 0.8);
font-size: 20px;
text-align: center;
line-height: 100px;
font-family: sans-serif;
text-transform: uppercase;
}

.cube .back{
-webkit-transform: translateZ(-50px) rotateY(180deg);
-moz-transform: translateZ(-50px) rotateY(180deg);
-ms-transform: translateZ(-50px) rotateY(180deg);
transform: translateZ(-50px) rotateY(180deg)
}

.cube .right {
-webkit-transform: rotateY(-270deg) translateX(50px);
-webkit-transform-origin: right center;
-moz-transform: rotateY(-270deg) translateX(50px);
-moz-transform-origin: right center;
-ms-transform: rotateY(-270deg) translateX(50px);
-ms-transform-origin: right center;
transform: rotateY(-270deg) translateX(50px);
transform-origin: right center;
}

.cube .left {
-webkit-transform: rotateY(270deg) translateX(-50px);
-webkit-transform-origin: center left;
-moz-transform: rotateY(270deg) translateX(-50px);
-moz-transform-origin: center left;
-ms-transform: rotateY(270deg) translateX(-50px);
-ms-transform-origin: center left;
transform: rotateY(270deg) translateX(-50px);
transform-origin: center left
}

.cube .top {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
-webkit-transform-origin: center center;
-moz-transform: rotateX(-90deg) translateZ(-50px);
-moz-transform-origin: center center;
-ms-transform: rotateX(-90deg) translateZ(-50px);
-ms-transform-origin: center center;
transform: rotateX(-90deg) translateZ(-50px);
transform-origin: center center;
}

.cube .bottom {
-webkit-transform: rotateX(90deg) translateZ(-50px);
-webkit-transform-origin: center center;
-moz-transform: rotateX(90deg) translateZ(-50px);
-moz-transform-origin: center center;
-ms-transform: rotateX(90deg) translateZ(-50px);
-ms-transform-origin: center center;
transform: rotateX(90deg) translateZ(-50px);
transform-origin: center center;
}

.cube .front{
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
transform: translateZ(50px)
}
.wrap.flat {
-webkit-perspective: none;
-webkit-perspective-origin: 0 0;
-moz-perspective: none;
-moz-perspective-origin: 0 0;
-ms-perspective: none;
-ms-perspective-origin: 0 0;
perspective: none;
perspective-origin: 0 0
}

html:

<div>
<div>
<div>前</div>
<div>后</div>
<div>上</div>
<div>下</div>
<div>左</div>
<div>右</div>
</div>
</div>
</div>