Question

我一直在3d网站上工作，我决定通过代码学院制作自己的视频游戏更容易。 https://www.codecademy.com/courses/web-beginner-en-X7bpO/0/1

因为它快速而简单，结果很快。所以我真的投入了代码开始看起来很好，但当我把代码带到任何其他代码编辑器时，它只显示一个黑屏。然而，在代码学院，它显示一个带有视频屏幕电视的3d房间。为什么我的代码不起作用？

这是我的代码。转到代码学院制作自己的视频游戏并将此代码复制并粘贴到编辑器中，它看起来不错。但在其他地方，我得到一个黑屏。有任何想法吗？

This is How The 3d site looks in code Academy make your own video game editor

＆＃13;

<!DOCTYPE html>
<html>
    <head>
   
    <style> 
    html,body { 
      min-height: 100%; 
      min-width: 100%; 
      background: black; 
    }
    .wrap {
	perspective: 99px;
	perspective-origin: center ;
	height: 100%; 
	width: 100%; 
	background:black;
}
.cube {
	position: relative;
	height: 100%; 
	width: 100%;
	top: 200px;
	left: 200px;
	transform-style: preserve-3d;
    transition: transform 300ms ease-in-out; 
}
.cube div {
	position: absolute;
   transform-style: preserve-3d; 
    width: 100%; 
    height: 50%; 
    
    
}

.img { 
  position: absolute;   
 width: 100%;   
 height: 100%;
 top: 0px; 
 right: 0px; 
 
 	transition: transform 300ms ease-in-out; 
 transform: tranalateZ(200px); 
 animation-name: myframes; 
		animation-duration: 6s; 
		animation-iteration-count: 1;
		animation-fill-mode: forwards; 
}

.img1 { 
  position: absolute;   
 width: 100%;   
 height: 100%;
 top: 0px; 
 right: 0px; 
 
 	transition: transform 300ms ease-in-out; 
 transform: tranalateZ(200px); 
 animation-name: myframes; 
		animation-duration: 6s; 
		animation-iteration-count: 1;
		animation-fill-mode: forwards; 
}

@keyframes myframes2 { 
 0% {
   transform: translateZ();   
 }

 100% {
   transform: translateZ(100px);   
 }
}


.cube:hover { 
    
}

@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateX(360deg); }
}




.back {
    
	transform: translateZ(-100px) ;
	background: black; 
 
		animation-name: myframes1; 
		animation-duration: 6s; 
		animation-iteration-count: 1;
		animation-fill-mode: forwards; 
}

.p {
 position: absolute;    
}



.right {
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
		background: black; 
			background-image: url("http://garagejazz.com/wp-content/uploads/2016/08/Wood-Wall-Paneling.jpg"); 
		background-size: 20px 100px; 
}

.left {
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
		background: black; 
		background-image: url("http://garagejazz.com/wp-content/uploads/2016/08/Wood-Wall-Paneling.jpg"); 
		background-size: 20px 100px; 
		
}
.top {
	transform: rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
		background: black; 
			background-image: url("http://www.featurepics.com/StockImage/20080324/sprayed-ceiling-texture-stock-photo-663871.jpg"); ); 
			background-size: 20px 20px; 
			
}
.bottom {
	transform: rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
		background: black; 
		background-image: url("http://azmind.com/wp-content/uploads/2014/09/free-wood-background-set.jpg"); 
	 
}




.front {
	transform: translateZ(100px);
		background: black; 
}


    
    
    
    
    </style> 
        <title></title>
        <link/>
        <script></script>
	</head>
	<body>
      <div class="wrap">
	<div class="cube">
		<div class="front">front</div>
		<div class="back">back
		<img class = 'img1'src = "http://ib1.huluim.com/show_key_art/1304?size=1600x600&region=US"> 
	<iframe class = 'img' src="https://www.youtube.com/embed/x4GZSwRt6OA" frameborder="0" allowfullscreen></iframe>
		</div>
		<div class="top">top</div>
		<div class="bottom">bottom</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
</div>
 <script   src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>
<script> 

$('.img').hide(); 



setTimeout(function() { 
    $('.img1').fadeOut(1500); 
  $('.img').fadeIn(3000);   
},2000); 

</script> 

	</body>
</html>

＆＃13;

Answer 1

您可以通过删除<!DOCTYPE html>声明来解决问题，但这不是一个更好的解决方案，因为它表明样式中存在错误。

相反，请尝试将以下内容添加到html, body的样式中：

height: 100%;
width: 100%;

然后你应该在codecademy之外得到预期的结果。

以下是一个例子：

＆＃13;

<!DOCTYPE html>
<html>
    <head>
   
    <style> 
    html,body { 
      min-height: 100%;
      max-height: 100%;
	  height: 100%;
	  width: 100%;
      background: black; 
    }
    .wrap {
	perspective: 99px;
	perspective-origin: center ;
	height: 100%; 
	width: 100%; 
	background:black;
}
.cube {
	position: relative;
	height: 100%; 
	width: 100%;
	top: 200px;
	left: 200px;
	transform-style: preserve-3d;
    transition: transform 300ms ease-in-out; 
}
.cube div {
	position: absolute;
   transform-style: preserve-3d; 
    width: 100%; 
    height: 50%; 
    
    
}

.img { 
  position: absolute;   
 width: 100%;   
 height: 100%;
 top: 0px; 
 right: 0px; 
 
 	transition: transform 300ms ease-in-out; 
 transform: tranalateZ(200px); 
 animation-name: myframes; 
		animation-duration: 6s; 
		animation-iteration-count: 1;
		animation-fill-mode: forwards; 
}

.img1 { 
  position: absolute;   
 width: 100%;   
 height: 100%;
 top: 0px; 
 right: 0px; 
 
 	transition: transform 300ms ease-in-out; 
 transform: tranalateZ(200px); 
 animation-name: myframes; 
		animation-duration: 6s; 
		animation-iteration-count: 1;
		animation-fill-mode: forwards; 
}

@keyframes myframes2 { 
 0% {
   transform: translateZ();   
 }

 100% {
   transform: translateZ(100px);   
 }
}


.cube:hover { 
    
}

@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateX(360deg); }
}




.back {
    
	transform: translateZ(-100px) ;
	background: black; 
 
		animation-name: myframes1; 
		animation-duration: 6s; 
		animation-iteration-count: 1;
		animation-fill-mode: forwards; 
}

.p {
 position: absolute;    
}



.right {
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
		background: black; 
			background-image: url("http://garagejazz.com/wp-content/uploads/2016/08/Wood-Wall-Paneling.jpg"); 
		background-size: 20px 100px; 
}

.left {
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
		background: black; 
		background-image: url("http://garagejazz.com/wp-content/uploads/2016/08/Wood-Wall-Paneling.jpg"); 
		background-size: 20px 100px; 
		
}
.top {
	transform: rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
		background: black; 
			background-image: url("http://www.featurepics.com/StockImage/20080324/sprayed-ceiling-texture-stock-photo-663871.jpg"); ); 
			background-size: 20px 20px; 
			
}
.bottom {
	transform: rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
		background: black; 
		background-image: url("http://azmind.com/wp-content/uploads/2014/09/free-wood-background-set.jpg"); 
	 
}




.front {
	transform: translateZ(100px);
		background: black; 
}


    
    
    
    
    </style> 
        <title></title>
        <link/>
        <script></script>
	</head>
	<body>
      <div class="wrap">
	<div class="cube">
		<div class="front">front</div>
		<div class="back">back
		<img class = 'img1'src = "http://ib1.huluim.com/show_key_art/1304?size=1600x600&region=US"> 
	<iframe class = 'img' src="https://www.youtube.com/embed/x4GZSwRt6OA" frameborder="0" allowfullscreen></iframe>
		</div>
		<div class="top">top</div>
		<div class="bottom">bottom</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
</div>
 <script   src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>
<script> 

$('.img').hide(); 



setTimeout(function() { 
    $('.img1').fadeOut(1500); 
  $('.img').fadeIn(3000);   
},2000); 

</script> 

	</body>
</html>

＆＃13;

代码在codeacademy中看起来很棒，但不是任何其他浏览器

1 个答案: