3d位移旋转制作立方体

今天给大家分享一个立方体制作小案例，成品如下：

html代码

	<section>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
	</section>

css代码。想象你手上托举有6本书，试着移动下，怎么样才能让六个面组成一个立方体呢？

正方体里面的花是section的背景图。section其实是处在“把正方体平均分成上下两层的那个隔板那里。宽高等同于6个面的宽高，设置的是背景色透明，所以看不见。transform-style和background-size:100% 100%;记得加上

section{
			width: 300px;
			height: 300px;
			position: fixed;
			left: 0;right: 0;
			top: 0;bottom: 0;
			margin: auto;
			transform-style: preserve-3d;
			transform:rotateX(30deg) rotate(30deg);
			background: url(images/hua2.png);
			background-size:100% 100%;
		}
div{
			width: 300px;
			height: 300px;
			font-size: 100px;
			color: #000;
			text-align: center;
			line-height: 300px;
			position: absolute;	
			left: 0;top: 0;	
			opacity: 0.5;
				
		}
div:nth-child(1){
			background: red;
			transform:translateX(150px) rotateY(90deg);
		}
div:nth-child(2){
			background: pink;
			transform:translateX(-150px) rotateY(-90deg);
		}
div:nth-child(3){
			background: yellow;
			transform:translateY(-150px) rotateX(90deg);
		}
div:nth-child(4){
			background: gray;
			transform:translateY(150px) rotateX(-90deg);
		}
div:nth-child(5){
			background: green;
			transform:translateZ(150px);
		}
div:nth-child(6){
			background:purple;
			transform:translateZ(-150px) rotateY(180deg);
		}