Ive auf einer 3D-Website gearbeitet, und ich beschloß, es wäre einfacher, auf es durch Code-Akademie zu arbeiten, um Ihr eigenes Video-Spiel machen. https://www.codecademy.com/courses/web-beginner-en-X7bpO/0/1Code sieht gut aus in Codecademy, aber nicht ein anderen Browser
, weil es ist nicht nur schnell und einfach, und das Ergebnis ist sofort. Also habe ich investiert wirklich der Code gestartet sieht gut aus, aber wenn ich den Code nahm zu jedem anderen Code-Editor, es zeigt nur einen schwarzen Bildschirm. In der Code Academy wird jedoch ein 3D-Raum mit einem Video-TV angezeigt. Warum funktioniert mein Code nicht?
Dies ist mein Code. Zum Code Akademie Ihr eigenes Video-Spiel machen und kopieren und diesen Code in den Editor einfügen und es sieht gut aus. Aber woanders und ich bekomme einen schwarzen Bildschirm. Irgendwelche Ideen ?
This is How The 3d site looks in code Academy make your own video game editor
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
min-height: 100%;
min-width: 100%;
background: black;
}
.wrap {
\t perspective: 99px;
\t perspective-origin: center ;
\t height: 100%;
\t width: 100%;
\t background:black;
}
.cube {
\t position: relative;
\t height: 100%;
\t width: 100%;
\t top: 200px;
\t left: 200px;
\t transform-style: preserve-3d;
transition: transform 300ms ease-in-out;
}
.cube div {
\t position: absolute;
transform-style: preserve-3d;
width: 100%;
height: 50%;
}
.img {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
right: 0px;
\t transition: transform 300ms ease-in-out;
transform: tranalateZ(200px);
animation-name: myframes;
\t \t animation-duration: 6s;
\t \t animation-iteration-count: 1;
\t \t animation-fill-mode: forwards;
}
.img1 {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
right: 0px;
\t transition: transform 300ms ease-in-out;
transform: tranalateZ(200px);
animation-name: myframes;
\t \t animation-duration: 6s;
\t \t animation-iteration-count: 1;
\t \t animation-fill-mode: forwards;
}
@keyframes myframes2 {
0% {
transform: translateZ();
}
100% {
transform: translateZ(100px);
}
}
.cube:hover {
}
@keyframes spin {
\t from { transform: rotateY(0); }
\t to { transform: rotateX(360deg); }
}
.back {
\t transform: translateZ(-100px) ;
\t background: black;
\t \t animation-name: myframes1;
\t \t animation-duration: 6s;
\t \t animation-iteration-count: 1;
\t \t animation-fill-mode: forwards;
}
.p {
position: absolute;
}
.right {
\t transform: rotateY(-270deg) translateX(100px);
\t transform-origin: top right;
\t \t background: black;
\t \t \t background-image: url("http://garagejazz.com/wp-content/uploads/2016/08/Wood-Wall-Paneling.jpg");
\t \t background-size: 20px 100px;
}
.left {
\t transform: rotateY(270deg) translateX(-100px);
\t transform-origin: center left;
\t \t background: black;
\t \t background-image: url("http://garagejazz.com/wp-content/uploads/2016/08/Wood-Wall-Paneling.jpg");
\t \t background-size: 20px 100px;
\t \t
}
.top {
\t transform: rotateX(-90deg) translateY(-100px);
\t transform-origin: top center;
\t \t background: black;
\t \t \t background-image: url("http://www.featurepics.com/StockImage/20080324/sprayed-ceiling-texture-stock-photo-663871.jpg"););
\t \t \t background-size: 20px 20px;
\t \t \t
}
.bottom {
\t transform: rotateX(90deg) translateY(100px);
\t transform-origin: bottom center;
\t \t background: black;
\t \t background-image: url("http://azmind.com/wp-content/uploads/2014/09/free-wood-background-set.jpg");
\t
}
.front {
\t transform: translateZ(100px);
\t \t background: black;
}
</style>
<title></title>
<link/>
<script></script>
\t </head>
\t <body>
<div class="wrap">
\t <div class="cube">
\t \t <div class="front">front</div>
\t \t <div class="back">back
\t \t <img class = 'img1'src = "http://ib1.huluim.com/show_key_art/1304?size=1600x600®ion=US">
\t <iframe class = 'img' src="https://www.youtube.com/embed/x4GZSwRt6OA" frameborder="0" allowfullscreen></iframe>
\t \t </div>
\t \t <div class="top">top</div>
\t \t <div class="bottom">bottom</div>
\t \t <div class="left">left</div>
\t \t <div class="right">right</div>
\t </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>
\t </body>
</html>
, wenn ich die Erklärung an der Spitze zu entfernen, und ich verändern min-height, min-Breite zu Höhe und Breite. Aus irgendeinem Grund kann ich nur die Rückseite des Würfels sehen, der das Video enthält. Die rechte, linke, obere und untere Seite werden ausgeblendet. –
@jalenjackson Funktioniert der Codeausschnitt für Sie, erweitern Sie ihn auf die ganze Seite? – fakedad
Oh ich habe es! Ich sehe, was Sie sagen hier, Dank, dass auch so viel Verwirrung aus früheren Projekten aufklärt. Vielen Dank Mann –