<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto|Fira+Sans' rel='stylesheet' type='text/css'>
<style>
body,html{
top: 0; left: 0; bottom: 0; right: 0;
background-color:#0b60e0;
background-color:#262;
color #eee;
}
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 100%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.wrap{
margin:auto;
}
.header{
width:100%;
height:50%;
background-color:#666;
margin:auto;
}
p{
font-family:'Roboto', sans;
}
.biglogo{
font-size:3rem;
font-family:'Fira Sans', sans-serif;
font-weight: 400;
text-align: center;
min-width:100%;
padding:2rem;
height:50%;
margin:auto;
background-color:rgba(8,8,8,0.5);
line-height: 3rem;
text-align:center;
color: undefined;
font-size:10rem;
text-shadow:0px 0px 0 rgb(202,202,202),1px 1px 0 rgb(191,191,191),2px 2px 0 rgb(179,179,179),3px 3px 0 rgb(168,168,168),4px 4px 0 rgb(156,156,156),5px 5px 0 rgb(145,145,145),6px 6px 0 rgb(133,133,133),7px 7px 0 rgb(122,122,122),8px 8px 0 rgb(110,110,110),9px 9px 0 rgb(99,99,99),10px 10px 0 rgb(87,87,87), 11px 11px 0 rgb(75,75,75),12px 12px 11px rgba(0,0,0,1),12px 12px 1px rgba(0,0,0,0.5),0px 0px 11px rgba(0,0,0,.2;);
/*color:#f6007b;*/
color:#eee;
z-index :2;
}
.vertex, .face, .assembly {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.face {
/* background-color: rgba(50, 40, 60, .35); */
background-color:rgba(255,255,255,0.6);
}
.vertex {
width: 10px;
height: 10px;
margin: -5px;
background: rgba(0, 0, 0, .0);
border-radius:15px;
color:rgba(0,0,0,0.1);
font: 12px / 1 "Courier New", monospace;
text-indent: 14px;
white-space: nowrap;
}
#scene {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
perspective: 400px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cube {
-webkit-animation: spin 20s linear infinite;
-moz-animation: spin 20s linear infinite;
-ms-animation: spin 20s linear infinite;
animation: spin 20s linear infinite;
}
.cube .face {
/*200x200x1100 */
width: 220px;
height: 220px;
margin: -110px;
}
.cube .face:nth-child(1) {
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-ms-transform: translateZ(200px);
transform: translateZ(200px);
}
.cube .face:nth-child(2) {
-webkit-transform: translateZ(-200px) rotateY(180deg);
-moz-transform: translateZ(-200px) rotateY(180deg);
-ms-transform: translateZ(-200px) rotateY(180deg);
transform: translateZ(-200px) rotateY(180deg);
}
.cube .face:nth-child(3) {
-webkit-transform: translateX(-200px) rotateY(-90deg);
-moz-transform: translateX(-200px) rotateY(-90deg);
-ms-transform: translateX(-200px) rotateY(-90deg);
transform: translateX(-200px) rotateY(-90deg);
}
.cube .face:nth-child(4) {
-webkit-transform: translateX(200px) rotateY(90deg);
-moz-transform: translateX(200px) rotateY(90deg);
-ms-transform: translateX(200px) rotateY(90deg);
transform: translateX(200px) rotateY(90deg);
}
.cube .face:nth-child(5) {
-webkit-transform: translateY(200px) rotateX(-90deg);
-moz-transform: translateY(200px) rotateX(-90deg);
-ms-transform: translateY(200px) rotateX(-90deg);
transform: translateY(200px) rotateX(-90deg);
}
.cube .face:nth-child(6) {
-webkit-transform: translateY(-200px) rotateX(90deg);
-moz-transform: translateY(-200px) rotateX(90deg);
-ms-transform: translateY(-200px) rotateX(90deg);
transform: translateY(-200px) rotateX(90deg);
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotateX(360deg) rotateY(1080deg) rotateZ(720deg);
}
}
@-moz-keyframes spin {
to {
-moz-transform: rotateX(360deg) rotateY(1080deg) rotateZ(720deg);
}
}
@keyframes spin {
to {
transform: rotateX(360deg) rotateY(1080deg) rotateZ(720deg);
}
}
</style>
<script>
var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
var x = 72;
var y = 163;
context.font = 'bold 143px Roboto, sans-serif';
context.fillStyle = '#262624' ;
context.strokeStyle = '#242321';
context.lineWidth = 3.2;
context.fillText( 'HTML', x, y);
context.strokeText( 'HTML', x, y);
</script>
</head><body>
<div class="row Absolute-Center">
<div class="wrap Container-Center">
<div class="header">
<h2><p class="biglogo font-effect-3d">Sistema X</p></h2>
</div>
</div>
</div>
<div id="scene">
<div id="cube" class="assembly cube">
<div id="face" class="face"></div>
<div id="face" class="face"></div>
<div id="face" class="face"></div>
<div id="face" class="face"></div>
<div id="face" class="face"></div>
<div id="face" class="face"></div>
</div>
</div>
<script src="http://keithclark.co.uk/articles/calculating-element-vertex-data-from-css-transforms/js.js"></script>
<script>
// shim requestAnimationFrame
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(f) { setTimeout(f, 1000/60); };
// Select the faces
var faces = [].slice.call(document.querySelectorAll(".face"));
/* Loop
---------------------------------------------------------------- */
function loop() {
// shedule the next update
requestAnimationFrame(loop);
faces.forEach(function (face, i) {
// Extract the elements transform
var vertexData = computeVertexData(face);
// Draw the vertices
renderVertex("a", face, vertexData.a);
renderVertex("b", face, vertexData.b);
renderVertex("c", face, vertexData.c);
renderVertex("d", face, vertexData.d);
});
}
// start the loop
loop();
/* Renders a vertex to the DOM
---------------------------------------------------------------- */
function renderVertex (id, face, vertex) {
var id = "_vertex_" + id,
vertexElem = face[id],
x = vertex.x.toFixed(2),
y = vertex.y.toFixed(2),
z = vertex.z.toFixed(2),
s = 1 - vertex.z / 400; // scale to keep the text readable
if (!vertexElem) {
vertexElem = face[id] = document.createElement("div");
vertexElem.className = "vertex";
document.getElementById("scene").appendChild(vertexElem);
}
// show the vertex coordinates
vertexElem.textContent = "x:" + x + " y:" + y + " z:" + z;
// apply the tralsation to the vertex
vertexElem.style.cssText =
"-webkit-transform: translate3d(" + x + "px," + y + "px," + z + "px) scale(" + s + ");" +
"-moz-transform: translate3d(" + x + "px," + y + "px," + z + "px) scale(" + s + ");" +
"-ms-transform: translate3d(" + x + "px," + y + "px," + z + "px) scale(" + s + ");" +
"transform: translate3d(" + x + "px," + y + "px," + z + "px) scale(" + s + ");";
}
</script>
<div class="container">
<div class="wrap" style="height:90px;color:#777;background-color:rgba(0,0,0,0.1);text-align:center;margin-bottom:-20px;border-top:1px solid #e5e5e5;vertical-align:bottom;">
<span style="vertical-align:bottom;height:10%;">
</span>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body></html>
