css立体旋转及注意事项

运用transform、transition、perspective相关的css属性，实现简单的立体旋转：
HTML代码：

  <div id="box">
	<div id="cube">
		<div>前</div>
		<div>后</div>
		<div>左</div>
		<div>右</div>
		<div>上</div>
		<div>下</div>
	</div>
  </div>

css代码：

  <style>
    *{
	  margin:0;
	  padding:0
	}
	#box{
	  width:450px;
	  height:450px;
	  border:1px solid;
	  position:absolute;
	  left:0;
	  top:0;
	  right:0;
	  bottom:0;
	  margin:auto;
	  perspective:300px;
	  transform-style:preserve-3d;
	}
	#cube{
	  width:150px;
	  height:150px;
	  position:absolute;
	  left:0;
	  top:0;
	  right:0;
	  bottom:0;
	  margin:auto;
	  transition:3s;
	  transform-style:preserve-3d;
	  transform-origin:center center -75px;
	}
	#cube > div{
	  width:150px;
	  height:150px;
	  border:1px solid blue;
	  box-sizing:border-box;
	  background:red;
	  text-align:center;
	  font:60px/150px "微软雅黑";
	  position:absolute;
	}
	#cube > div:nth-child(1){
	  z-index:1
	}
	#cube > div:nth-child(2){
	  transform:translateZ(-150px) rotateX(180deg)
	}
	#cube > div:nth-child(3){
	  left:-150px;
	  transform-origin:right;
	  transform:rotateY(-90deg)
	}
	#cube > div:nth-child(4){
	  right:-150px;
	  transform-origin:left;
	  transform:rotateY(90deg)
	}
	#cube > div:nth-child(5){
	  top:-150px;
	  transform-origin:bottom;
	  transform:rotateX(90deg)
	}
	#cube > div:nth-child(6){
	  bottom:-150px;
	  transform-origin:top;
	  transform:rotateX(-90deg)
	}
	#box:hover #cube{
	  transform:rotateX(360deg)
	}
  </style>

页面效果：

如果我们把立方体的背景改成透明度：

	#cube > div{
	  width:150px;
	  height:150px;
	  border:1px solid blue;
	  box-sizing:border-box;
	  /*background:red;*/
	  background:rgba(255,0,0,.3);
	  text-align:center;
	  font:60px/150px "微软雅黑";
	  position:absolute;
	}

效果就变成这样了：

可以看见除了正面，后面的图像全能看到了，这种不是我们应该要的效果，我们可以运用backface-visibility属性对它进行修改，从而达到我们的效果：

	#cube > div{
	  width:150px;
	  height:150px;
	  border:1px solid blue;
	  box-sizing:border-box;
	  /*background:red;*/
	  background:rgba(255,0,0,.3);
	  text-align:center;
	  font:60px/150px "微软雅黑";
	  position:absolute;
	  backface-visibility:hidden;
	}

效果如下：

现在又恢复正常了！
但是如果我们给外框添加一个背景：

	#box{
	  width:450px;
	  height:450px;
	  border:1px solid;
	  position:absolute;
	  left:0;
	  top:0;
	  right:0;
	  bottom:0;
	  margin:auto;
	  perspective:300px;
	  transform-style:preserve-3d;
	  background:yellow
	}

效果如下：

em…
最后查阅相关相关资料，才发现是层级的问题，我们的#box和#cube都有transform-style:preserve-3d，
所以导致最后效果变成这样，去掉#box身上的transform-style:preserve-3d就行了：

	#box{
	  width:450px;
	  height:450px;
	  border:1px solid;
	  position:absolute;
	  left:0;
	  top:0;
	  right:0;
	  bottom:0;
	  margin:auto;
	  perspective:300px;
	  /*transform-style:preserve-3d;*/
	  background:yellow
	}

效果如下：

注意：transform-style属性如果被扁平化,则子元素不会独立的存在三维空间;因为该属性不会被自动继承,所以最好只为发生变化元素的父元素设置该属性。