具体步骤如下：
一、立方体结构中，使用一个wrapper div来包裹立方体。在里面使用6个div来制作立方体的6个面。
二、立方体的每一个面都有它自己的元素。我们稍后会使用CSS来将立方体的6个面放置到正确的位置上。
三、在立方体的CSS样式中，首先要关注的是立方体的wrapper div。为了制作3D效果，我们需要为它提供一个 CSS perspective。
四、CSS perspective属性是一个比较复杂的CSS3属性。最好的理解它的方法是看完文档后，自己动手修改一下DEMO中的perspective属性来看看它的变化。
下面需要给包含立方体6个面的立方体的容器.cube提供样式：
1、.cube {
position: relative
width: 200px
transform-style: preserve-3d
2、给立方体容器200像素的宽度，并设置为相对定位，这样在它里面的立方体的6个面可以设置为绝对定位。
3、preserve-3d属性确保所有6个面都处于3D立体状态。
4、在为6个面设置它们的位置之前，先给它们一些通用的样式：
.cube div {
position: absolute
width: 200px
height: 200px
}
5、在进过上面对立方体6个面的一系列设置之后，现在我们可以为6个面制作变形效果，以使它们组装为一个立方体。
6、rotateY的值可以旋转立方体的各个面，使上面的文字处于正确的位置上。
7、而 translateZ 的值使元素在指定容器中向前或向后移动。translateY的值看起来有些混乱，但是请记住，它的作用是通过透明的面板来使指定的面升高或降低来制作3D效果。
8、每一个面都有自己的translations值来使它们处于适当的位置上。你可以自己修改一下这些值来看看效果。
css3背景渐变和盒子阴影以及3d边框线
.a_demo_one {background-color:#3bb3e0
padding:10px
position:relative
font-family: 'Open Sans', sans-serif
font-size:12px
text-decoration:none
color:#fff
border: solid 1px #186f8f
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%)
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
)
-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff
box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff
-webkit-border-radius: 5px
-moz-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
}
.a_demo_one::before {
background-color:#ccd0d5
content:""
display:block
position:absolute
width:100%
height:100%
padding:8px
left:-8px
top:-8px
z-index:-1
-webkit-border-radius: 5px
-moz-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
-webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff
-moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff
-o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff
box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff
}
.a_demo_one:active {
padding-bottom:9px
padding-left:10px
padding-right:10px
padding-top:11px
top:1px
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%)
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
)
}
1.CSS3除了为开发者提供二维变形之外,还将动画从二维平面推动到了三维立体状态,能够实现真正的三维特效。 三维变形和二维变形一样,均使用的是transform属性。想要触发三维变形有两种方式:一种方式是通过语法告知浏览器“...
2.
触发方法2:直接使用CSS3变
