Question

我正在试图用一个有6个表面/页面的3D立方体制作一个网页。

这是我的3D立方体的代码：

$(document).ready(function(){

  $('button').click(function(){
    $('button').removeClass('active');
    $(this).addClass('active');
  });
  
  $('.ft').click(function(){                                    
    $('#shape').removeClass().addClass('show-ft');
  });
  
  $('.rt').click(function(){
    $('#shape').removeClass().addClass('show-rt');
  });
  
  $('.lt').click(function(){
    $('#shape').removeClass().addClass('show-lt');
  });
  
  $('.bk').click(function(){
    $('#shape').removeClass().addClass('show-bk');
  });
  
  $('.tp').click(function(){
    $('#shape').removeClass().addClass('show-tp');
  });
  
  $('.bm').click(function(){
    $('#shape').removeClass().addClass('show-bm');
  });
  
  $('.spinstart').click(function(){   
    $('#shape').addClass('spin'); 
  });
  
  $('.spinstop').click(function(){ 
    $('#shape').removeClass('spin'); 
  });
  
});

#main { 
  margin:0; 
  padding:0; 
  border:1px solid #ddd; 
  background-color:white; 
  width:800px; 
  height:500px;
  margin:10px auto; 
}

		.btn-group-wraper { 
        position:absolute; 
        top:30px; 
        left:65px; 
    }
		.shadow { 
        position:absolute; 
        width:100px; 
        height:100px; 
        box-shadow:0 0 15px white; 
        box-shadow:inset 0 0 155px white; 
        background-color:#000 !important; 
        opacity:.15 !important; -webkit-transform:    
          rotateX(90deg) translateZ(-100px);
        -moz-transform: rotateX(90deg) translateZ(-100px);    
    }
		#container { 
      width:100%; -webkit-perspective:800px; -moz-
        perspective:800px; 
      perspective:800px; position:relative; 
    }


		#shape {
			position:relative; margin:0 auto; top:170px;
      width:125px; height:125px;
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
       transform-style: preserve-3d;
			-webkit-transform: rotateX(-5deg) rotateY(-30deg);
			-moz-transform: rotateX(-5deg) rotateY(-30deg);
       transform: rotateX(-5deg) rotateY(-30deg);
			-webkit-transition: -webkit-transform 2s;
			-moz-transition: -moz-transform 2s;
       transition: transform 2s;
		}
		@-webkit-keyframes spin {
			to	 { -webkit-transform: rotateX(360deg)
      rotateY(360deg); 
    }
		}
		@-moz-keyframes spin {
			to	 { 
      -moz-transform: rotateX(360deg) rotateY(360deg); 
      }
		}
    @keyframes spin {
			to	 { transform: rotateX(360deg) rotateY(360deg); }
		}
		#shape > div { 
      position:absolute; 
      width:125px; 
      height:125px; 
      border:1px solid white; 
      background-color:#999;
    }
		#shape .ft { 
      -webkit-transform: translateZ(63px); 
      -moz-transform: translateZ(63px); 
      transform: translateZ(63px); 
    }
		#shape .rt { 
      -webkit-transform: rotateY(90deg) translateZ(63px);
      -moz-transform: rotateY(90deg) translateZ(63px);
      transform: rotateY(90deg) translateZ(63px); 
    }
      #shape .bk { -webkit-transform: rotateY(180deg)
      translateZ(63px);
      -moz-transform: rotateY(180deg) translateZ(63px);
      transform: rotateY(180deg) translateZ(63px); 
    }
		#shape .lt { 
      -webkit-transform: rotateY(270deg) translateZ(63px);
      -moz-transform: rotateY(270deg) translateZ(63px);
      transform: rotateY(270deg) translateZ(63px); 
    }
		#shape .tp { 
      -webkit-transform: rotateX(90deg) translateZ(63px);
      -moz-transform: rotateX(90deg) translateZ(63px);
      transform: rotateX(90deg) translateZ(63px); 
    }
		#shape .bm { 
      -webkit-transform: rotateX(270deg) rotateY(0deg)
      translateZ(63px); 
      -moz-transform: rotateX(270deg) rotateY(0deg) 
      translateZ(63px); 
      transform: rotateX(270deg) rotateY(0deg) 
      translateZ(63px); 
    }
    
		#shape.show-ft { 
      -webkit-transform: translateZ(63px); 
      -moz-transform: translateZ(63px); 
      transform: translateZ(63px); 
    }
		#shape.show-rt { 
      -webkit-transform: rotateX(360deg) rotateY(-90deg);
      -moz-transform: rotateX(360deg) rotateY(-90deg);
      transform: rotateX(360deg) rotateY(-90deg); 
    }
		#shape.show-bk { 
      -webkit-transform: rotateY(180deg); 
      -moz-transform: rotateY(180deg); 
      transform: rotateY(180deg); 
    }
		#shape.show-lt { 
      -webkit-transform: rotateY(90deg); 
      -moz-transform: rotateY(90deg); 
      transform: rotateY(90deg); 
    }
		#shape.show-tp { 
      -webkit-transform: scale(1.5); 
      -moz-transform: scale(1.5); 
      -webkit-transform: rotateX(-90deg) rotateY(-360deg);
      -moz-transform: rotateX(-90deg) rotateY(-360deg);
      transform: rotateX(-90deg) rotateY(-360deg); 
    }
		#shape.show-bm { 
      -webkit-transform: rotateX(90deg) rotateY(360deg);
      -moz-transform: rotateX(90deg) rotateY(360deg);
      transform: rotateX(90deg) rotateY(360deg); 
    }
		#shape.spin { 
      -webkit-animation: spin 5s infinite linear; 
      -moz-animation: spin 5s infinite linear; 
      animation: spin 5s infinite linear; 
    }
		#shape { 
      -webkit-transition: all 1s; 
      -moz-transition: all 1s; 
      transition: all 1s; 
      -webkit-transform: scale(1); 
      -webkit-transform: rotateX(-5deg) rotateY(-30deg);
      -moz-transform: scale(1); 
      -moz-transform: rotateX(-5deg) rotateY(-30deg);
      transform: scale(1);
      transform: rotateX(-5deg) rotateY(-30deg); 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="main">
  <div id="container">
    <div class="btn-group-wraper">
      <div>
        <button class="ft">1</button>
        <button class="rt">2</button>
        <button class="bk">3</button>
        <button class="lt">4</button>
        <button class="tp">5</button>
        <button class="bm">6</button>
      </div>
      <div>
        <button class="spinstart">spin start</button>
        <button class="spinstop">spin stop</button>
      </div>
    </div>
    <div id="shape">
      <div class="ft" id="#ftid">1</div>
      <div class="rt" id="#rtid">2</div>
      <div class="bk" id="#bkid">3</div>
      <div class="lt" id="#ltid">4</div>
      <div class="tp" id="#tpid">5</div>
      <div class="bm" id="#ftid">6</div>
    </div>
  </div>
</div>

到Fiddle.js： Fiddle.js

请忽略spinstart和spinstop。

说实话，这不是自制代码，我在网站上找到并在那里下载。因为我不知道所有那些3D东西我开始学习它但是我对css三维立方体的了解在优化立方体大小的过程中失败了。

我尝试将我的网站添加到：

<div id="shape">
  <div class="ft" id="#ftid">1</div>
  <div class="rt" id="#rtid">2</div>
  <div class="bk" id="#bkid">3</div>
  <div class="lt" id="#ltid">4</div>
  <div class="tp" id="#tpid">5</div>
  <div class="bm" id="#ftid">6</div>
</div>

问题是，当我这样做时，立方体断开，意味着它不再正确旋转，我不知道是不是因为网页比1, 2, 3, 4, 5, 6更大，尽管我改变了表面的大小为auto，因此它们适应网页的CSS。

如果你们能给我一个简短的解释，或者我可以纠正自己关于这个主题的指针。

请不要将此问题投反对票，我在网上找不到与此主题类似的内容。我只找到了关于3D立方体的简化示例和教程。

注意： 我没有要求代码，我正在寻求帮助。

用3D立方体制作网页？

0 个答案: