CSS3实现3D立方体旋转效果

最新推荐文章于 2024-08-30 02:28:01 发布

小老虎Love

最新推荐文章于 2024-08-30 02:28:01 发布

阅读量1.6k

点赞数

文章标签： CSS3

本文链接：https://blog.csdn.net/tenghu8888/article/details/41644737

版权

使用CSS3实现3D立方体选择效果，效果如下：

代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
	#divs{
		-webkit-perspective:500;
		-webkit-perspective-origin:50% 50%;
		overflow:hidden;
		margin-top:100px;
	}

	#group{
		height:250px;
		width:250px;
		position:relative;
		margin:auto;
		-webkit-transform-style:preserve-3d;
		-webkit-transition:-webkit-transform 1s linear;
		-webkit-transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);
	}


	.d{
		height:100px;
		width:100px;
		position:absolute;
		background:#f0f;
		color:#FFFFFF;
		font-weight:bold;
		text-align:center;
		line-height:100px;
		font-size:100px;
		top:0px;
		bottom:0px;
		left:0px;
		right:0px;
		margin:auto;
	}


	#d2{
		-webkit-transform-origin:left;
		-webkit-transform:rotateY(90deg);
		background:#00f;
	}

	#d3{
		-webkit-transform-origin:bottom;
		-webkit-transform:rotateX(90deg);
		background:#f00;
	}

	#d4{
		-webkit-transform-origin:right;
		-webkit-transform:rotateY(-90deg);
		background:#0ff;
	}

	#d5{
		-webkit-transform-origin:top;
		-webkit-transform:rotateX(-90deg);
		background:#ff0;
	}

	#d6{
		-webkit-transform:translateZ(-100px);
		background:#0e0;
	}

	#handler{	
		margin:auto;
		font-weight:bold;
		width:700px;
	}

	.rotate{
		width:100%;
	}
	
  </style>
  <script type="text/javascript">
	function onRotate(){
		var x=document.getElementById("rangX").value;
		var y=document.getElementById("rangY").value;
		var z=document.getElementById("rangZ").value;

		document.getElementById("group").style.webkitTransform="rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";

		document.getElementById("handleX").innerText=x;
		document.getElementById("handleY").innerText=y;
		document.getElementById("handleZ").innerText=z;
	}
  </script>
 </head>
 <body>
  <div id="divs">
	<div id="group">
		<div class="d" id="d1">1</div>
		<div class="d" id="d2">2</div>
		<div class="d" id="d3">3</div>
		<div class="d" id="d4">4</div>
		<div class="d" id="d5">5</div>
		<div class="d" id="d6">6</div>
	</div>
  </div>

  <div id="handler">
	<p>rotateX:<span id="handleX">0</span>deg</p>
	<input type="range" min="-360" max="360" value="0" id="rangX" class="rotate" οnchange="onRotate()"/>
	<p>rotateY:<span id="handleY">0</span>deg</p>
	<input type="range" min="-360" max="360" value="0" id="rangY" class="rotate" οnchange="onRotate()"/>
	<p>rotateZ:<span id="handleZ">0</span>deg</p>
	<input type="range" min="-360" max="360" value="0" id="rangZ" class="rotate" οnchange="onRotate()"/>
  </div>
 </body>
</html>