- <!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;
- backface-visibility:hidden;
- -webkit-backface-visibility:hidden;
- }
- .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>
- </head>
- <body>
- <ul class="item_transform">
- <li class="mode_3d">
- <label>透视:</label><input type="range" id="perspective" min="1" max="10000" value="800" /> <span>800px</span>
- </li>
- <li class="mode_3d">
- <label>外容器宽:</label><input type="range" id="width" min="100" max="1000" value="300" /> <span>300px</span>
- </li>
- <li class="mode_3d">
- <label>外容器高:</label><input type="range" id="height" min="100" max="1000" value="300" /> <span>300px</span>
- </li>
- <li class="mode_3d">
- <label>水平视点:</label><input type="range" id="perspective-origin-x" min="1" max="100" value="50" /> <span>50%</span>
- </li>
- <li class="mode_3d">
- <label>垂直视点:</label><input type="range" id="perspective-origin-y" min="1" max="100" value="50" /> <span>50%</span>
- </li>
- <li class="mode_3d">
- <label>translateZ:</label><input type="range" id="translateZ" min="0" max="1000" value="10" /> <span>10px</span>
- </li>
- <li class="mode_3d"><label>rotateX:</label><input type="range" id="cube_rotateX" min="-360" max="360" value="0" /> <span>0deg</span></li>
- <li class="mode_3d"><label>rotateY:</label><input type="range" id="cube_rotateY" min="-360" max="360" value="0" /> <span>0deg</span></li>
- <li class="mode_3d"><label>rotateZ:</label><input type="range" id="cube_rotateZ" min="-360" max="360" value="0" /> <span>0deg</span></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 src1="js_lib/jquery-2.0.3.js"></script>
- <script>
- $(function(){
- var transformArr=[0,0,0]
- $("#perspective").on('change',function(e) {
- $("#cube").parent().CSS({
- "-webkit-perspective":$(this).val()+"px"
- });
- $(this).next("span").text($(this).val()+"px");
- });
- $("#width").on('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").on('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").on('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").on('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").on('change',function(e) {
- // var val=$(this).val();
- $("#cube").css({
- "-webkit-transform":"translateZ("+$(this).val()+"px)"
- });
- $(this).next("span").text($(this).val()+"px");
- });
- $("#cube_rotateX").on('change',function(){
- transformArr[0]=$(this).val();
- $("#cube").css({
- "-webkit-transform":"rotateX("+transformArr[0]+"deg) "+
- "rotateY("+transformArr[1]+"deg) "+
- "rotateZ("+transformArr[2]+"deg)"
- });
- $(this).next("span").text($(this).val()+"deg");
- });
- $("#cube_rotateY").on('change',function(){
- transformArr[1]=$(this).val();
- $("#cube").css({
- "-webkit-transform":"rotateX("+transformArr[0]+"deg) "+
- "rotateY("+transformArr[1]+"deg) "+
- "rotateZ("+transformArr[2]+"deg)"
- });
- $(this).next("span").text($(this).val()+"deg");
- });
- $("#cube_rotateZ").on('change',function(){
- transformArr[2]=$(this).val();
- $("#cube").css({
- "-webkit-transform":"rotateX("+transformArr[0]+"deg) "+
- "rotateY("+transformArr[1]+"deg) "+
- "rotateZ("+transformArr[2]+"deg)"
- });
- $(this).next("span").text($(this).val()+"deg");
- });
- });
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/030620149706.html
来源: http://www.codesnippet.cn/detail/030620149706.html