利用css3实现3D立方体旋转

<!DOCTYPE html>
<html>
<head>
	<title>cssBox</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#stage{	/*舞台元素，该元素作为舞台，不用进行3d操作，舞台内部的元素需设置为3d元素，包括容器和容器内的元素*/
			position: relative;
			height: 800px;
			background-color: #D4D4D4;
			perspective: 3500px;	/*使得舞台子元素变为透视元素， 即遵循近大远小，参考WebGL的透视相机*/
			perspective-origin: 0 0;	/*设置相机相对舞台的位置， 这里设置未左上角，个人理解是相机发射垂直射线到stage形成的点在左上角*/
		}
		#container{
			width: 500px;
			height: 500px;
			position: absolute;
			/*使得容器居中放置*/
			margin-left: calc(50% - 250px);
			margin-top: 150px;
			transition: all ease-in-out 1s;
			/*这步操作很关键，给容器加入3d效果，这时候容器内部的元素（即容器子元素）,形成3d关系，若无此操作，经过3d变换，空间是乱的*/
			transform-style: preserve-3d;
			/*设置容器进行3d变换的中心点，即WebGL里的物体中心点，所有变换的会围绕改点进行，尤其是旋转最为明显，这里设置的点的位置刚好在正方体的最中心*/
			transform-origin: center center 250px;
		}
		.page{
			box-shadow: 5px 5px 10px #A9A9A9;/*设置盒子阴影*/
			/*该操作这里可要可不要，默认值就是visible，若设置为hidden，则一个元素转到背面的时候会变为透明，否则背面跟前面一样。这里是看不到背面的，所有不用进行设置*/
			backface-visibility: visible;
			position: absolute;
			width: 500px;
			height: 500px;
		}
	</style>
</head>
<body>
<div id="stage">
	<div id="container">
		<div id="page1" class="page" style="background-color: #D15FEE; transform: translateZ(500px);"></div>
		<div id="page2" class="page" style="background-color: #CDCD00; transform-origin: left center; transform: rotateY(-90deg);"></div>
		<div id="page3" class="page" style="background-color: #C0FF3E; transform-origin: right center; transform: rotateY(90deg);"></div>
		<div id="page4" class="page" style="background-color: #ADD8E6; transform-origin: center top; transform: rotateX(90deg);"></div>
		<div id="page5" class="page" style="background-color: #8B4513; transform-origin: center bottom; transform: rotateX(-90deg);" ></div>
		<div id="page6" class="page" style="background-color: #303030; transform: rotateY(180deg)"></div>
	</div>
	
</div>

<script type="text/javascript">
	var container = document.getElementById("container");
	var angle = 0;
	container.addEventListener("click", function(){
		angle += 90;
		container.style.transform = "rotateY(" + angle + "deg)";
	}, false);
</script>
</body>
</html>

另一种实现方式：通过先旋转再逐个平移来实现正方体，这样不用变换中心店transform-origin:

<!DOCTYPE html>
<html>
<head>
	<title>cssBox</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#stage{	/*舞台元素，该元素作为舞台，不用进行3d操作，舞台内部的元素需设置为3d元素，包括容器和容器内的元素*/
			position: relative;
			height: 800px;
			background-color: #D4D4D4;
			perspective: 3500px;	/*使得舞台子元素变为透视元素， 即遵循近大远小，参考WebGL的透视相机*/
			perspective-origin: 0 0;	/*设置相机相对舞台的位置， 这里设置未左上角，个人理解是相机发射垂直射线到stage形成的点在左上角*/
		}
		#container{
			width: 500px;
			height: 500px;
			position: absolute;
			/*使得容器居中放置*/
			margin-left: calc(50% - 250px);
			margin-top: 150px;
			transition: all ease-in-out 1s;
			/*这步操作很关键，给容器加入3d效果，这时候容器内部的元素（即容器子元素）,形成3d关系，若无此操作，经过3d变换，空间是乱的*/
			transform-style: preserve-3d;
		}
		.page{
			box-shadow: 5px 5px 10px #A9A9A9;/*设置盒子阴影*/
			/*该操作这里可要可不要，默认值就是visible，若设置为hidden，则一个元素转到背面的时候会变为透明，否则背面跟前面一样。这里是看不到背面的，所有不用进行设置*/
			backface-visibility: visible;
			position: absolute;
			width: 500px;
			height: 500px;
		}
	</style>
</head>
<body>
<div id="stage">
	<div id="container">
<!--这里translateZ不像WebGL里的z坐标，WebGL的z坐标是永恒不变的，变的只有物体场景，这里translateZ所指的方向是相对物体当前状态而定，永远相对物体的正前方（正前方指面朝的方向，初始朝着人眼）-->
		<div id="page1" class="page" style="background-color: #D15FEE; transform: rotateY(0deg) translateZ(250px);"></div>
		<div id="page2" class="page" style="background-color: #CDCD00; transform: rotateY(90deg) translateZ(250px);"></div>
		<div id="page3" class="page" style="background-color: #C0FF3E; transform: rotateY(180deg) translateZ(250px);"></div>
		<div id="page4" class="page" style="background-color: #ADD8E6; transform: rotateY(270deg) translateZ(250px);"></div>
		<div id="page5" class="page" style="background-color: #8B4513; transform: rotateX(-90deg) translateZ(250px)" ></div>
		<div id="page6" class="page" style="background-color: #303030; transform: rotateX(90deg) translateZ(250px)"></div>
	</div>
	
</div>

<script type="text/javascript">
	var container = document.getElementById("container");
	var angle = 0;
	container.addEventListener("click", function(){
		angle += 90;
		container.style.transform = "rotateY(" + angle + "deg)";
	}, false);
</script>
</body>
</html>

利用css3实现3D立方体旋转

猜你喜欢