CSS3 创建3D模型

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建3D模型
		</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			li{
				list-style:none;
			}
			body{
				font-size:12px;
				background:#fff;
				font-family:'Helvetica Neue',Arial,sans-serif;
				-webkit-text-size-adjust: none;
				color:#333;
			}
			.box{
				margin:100px auto;
				width:500px;
				height:500px;
				border:5px solid #ddd;
			}
			#cube{
				width:300px;
				height:300px;
				margin:100px auto;
				-moz-transform-style:preserve-3d;
				-webkit-transform-style:preserve-3d;
			}
			#cube li{
				display:block;
				position:absolute;
				width:298px;
				height:298px;
				font-size:120px;
				line-height:298px;
				text-align:center;
				border:1px solid #333;
				z-index:10;
			}
			.front{
				-webkit-transform:rotateY(0deg) translateZ(150px);
				-moz-transform:rotateY(0deg) translateZ(150px);
				background:rgba(0,255,0,0.3);
			}
			.back{
				-webkit-transform:rotateY(180deg) translateZ(150px);
				-moz-transform:rotateY(180deg) translateZ(150px);
				background:rgba(255,0,0,0.3);
			}
			.right{
				-webkit-transform:rotateY(90deg) translateZ(150px);
				-moz-transform:rotateY(90deg) translateZ(150px);
				background:rgba(255,255,0,0.3);
			}
			.left{
				-webkit-transform:rotateY(-90deg) translateZ(150px);
				-moz-transform:rotateY(-90deg) translateZ(150px);
				background:rgba(10,10,10,0.3);
			}
			.top{
				-webkit-transform:rotateX(90deg) translateZ(150px);
				-moz-transform:rotateX(90deg) translateZ(100px);
				background:rgba(100,0,0,0.3);
			}
			.bottom{
				-webkit-transform:rotateX(-90deg) translateZ(150px);
				-moz-transform:rotateX(-90deg) translateZ(150px);
				background:rgba(0,255,255,0.3);
			}
			input[type="range"]{
				width:800px;
			}
		</style>
		<script type="text/javascript" src="https://ku.shouce.ren/libs/jquery/1/jquery1.7.2.min.js">
		</script>
	</head>
	<body>
		<ul class="item_transform">
			<li class="mode_3d">
				<label for="perspective">透　　视：
				</label>
				<input type="range" id="perspective" min="1" max="10000" value="800" /> 
				<span>800px
				</span>
			</li>
			<li class="mode_3d">
				<label for="width">外容器宽：
				</label>
				<input type="range" id="width" min="100" max="1000" value="300" /> 
				<span>300px
				</span>
			</li>
			<li class="mode_3d">
				<label for="height">外容器高：
				</label>
				<input type="range" id="height" min="100" max="1000" value="300" /> 
				<span>300px
				</span>
			</li>
			<li class="mode_3d">
				<label for="perspective-origin-x">水平视点：
				</label>
				<input type="range" id="perspective-origin-x" min="1" max="100" value="50" /> 
				<span>50%
				</span>
			</li>
			<li class="mode_3d">
				<label for="perspective-origin-y">垂直视点：
				</label>
				<input type="range" id="perspective-origin-y" min="1" max="100" value="50" /> 
				<span>50%
				</span>
			</li>
			<li class="mode_3d">
				<label for="translateZ">translateZ：
				</label>
				<input type="range" id="translateZ" min="0" max="1000" value="10" /> 
				<span>10px
				</span>
			</li>
			<li class="mode_3d">
				<label for="cube_rotateX">rotateX：
				</label>
				<input type="range" id="cube_rotateX" min="-360" max="360" value="0" /> 
				<span>0deg
				</span>
			</li>
			<li class="mode_3d">
				<label for="cube_rotateY">rotateY：
				</label>
				<input type="range" id="cube_rotateY" min="-360" max="360" value="0" /> 
				<span>0deg
				</span>
			</li>
			<li>
				<label for="transform-style">transform-style：
				</label>
				<input type="button" value="preserve-3d" id="transform-style">
			</li>
		</ul>
		<div class="box" style="-webkit-perspective:800px;-moz-perspective:800px;">
			<ul id="cube">
				<li class="front">1
				</li>
				<li class="back">2
				</li>
				<li class="right">3
				</li>
				<li class="left">4
				</li>
				<li class="top">5
				</li>
				<li class="bottom">6
				</li>
			</ul>
		</div>
		<script>
			$(function(){
				var transformArr=[0,0]
				$("#perspective").change(function(e) {
					$("#cube").parent().css({
						"-webkit-perspective":$(this).val()+"px"
					}
										   );
					$(this).next("span").text($(this).val()+"px");
				}
										);
				$("#width").change(function(e) {
					// var val=$(this).val();
					$("#cube").css({
						"border":"1px solid red",
						"width":$(this).val()+"px"
					}
								  );
					$(this).next("span").text($(this).val()+"px");
				}
								  );
				$("#height").change(function(e) {
					// var val=$(this).val();
					$("#cube").css({
						"border":"1px solid red",
						"height":$(this).val()+"px"
					}
								  );
					$(this).next("span").text($(this).val()+"px");
				}
								   );
				$("#perspective-origin-x").change(function(e) {
					// var val=$(this).val();
					$("#cube").css({
						"-webkit-perspective-origin-x":$(this).val()+"%",
						"-moz-perspective-origin-x":$(this).val()+"%"
					}
								  );
					$(this).next("span").text($(this).val()+"%");
				}
												 );
				$("#perspective-origin-y").change(function(e) {
					// var val=$(this).val();
					$("#cube").css({
						"-webkit-perspective-origin-y":$(this).val()+"%",
						"-moz-perspective-origin-y":$(this).val()+"%"
					}
								  );
					$(this).next("span").text($(this).val()+"%");
				}
												 );
				$("#translateZ").change(function(e) {
					// var val=$(this).val();
					$("#cube").css({
						"-webkit-transform":"translateZ("+$(this).val()+"px)"
					}
								  );
					$(this).next("span").text($(this).val()+"px");
				}
									   );
				$("#cube_rotateX").change(function(){
					transformArr[0]=$(this).val();
					$("#cube").css({
						"-webkit-transform":"rotateX("+transformArr[0]+"deg) rotateY("+transformArr[1]+"deg)"
					}
								  );
					$(this).next("span").text($(this).val()+"deg");
				}
										 );
				$("#cube_rotateY").change(function(){
					transformArr[1]=$(this).val();
					$("#cube").css({
						"-webkit-transform":"rotateX("+transformArr[0]+"deg) rotateY("+transformArr[1]+"deg)"
					}
								  );
					$(this).next("span").text($(this).val()+"deg");
				}
										 );
				$("#transform-style").toggle(function(){
					$(this).val("flat");
					$("#cube").css({
						"-webkit-transform-style":"flat",
						"-moz-transform-style":"flat"
					}
								  );
				}
											 ,function(){
					$("#cube").css({
						"-webkit-transform-style":"preserve-3d",
						"-moz-transform-style":"preserve-3d"
					}
								  );
					$(this).val("preserve-3d");
				}
											);
			}
			 );
		</script>
	</body>
</html>

​x
 
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>创建3D模型
        </title>
        <style>
            *{
                padding:0;
                margin:0;
            }
            li{
                list-style:none;
            }
            body{
                font-size:12px;
                background:#fff;
                font-family:'Helvetica Neue',Arial,sans-serif;
                -webkit-text-size-adjust: none;
                color:#333;
            }
            .box{