visual-js/css/style.css

[3.0.26] Prepare for npm usage. Special integration for matrix engine 1.9.0 Thunder.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #404040;
}

canvas {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  /* mobile webkit */
}

/**
 * MULTI SCREENS SYSTEM
*/

#experiment {
  position: absolute;
  left: 0;
  top: 0;

  -webkit-perspective: 1600;
  -webkit-perspective-origin: 50% 800px;
  perspective: 1600;
  perspective-origin: 50% 800px;
}

#cube {
  position: relative;
  margin: 0px auto;
  margin-top: 126px;
  height: 800px;
  width: 100%;
  -webkit-transition: -webkit-transform 1s linear;
  -webkit-transform-style: preserve-3d;
  transition: transform 1s linear;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  height: 700px;
  width: 700px;
  padding: 0px;
  background-color: rgba(50, 50, 50, 0.7);
}

#cube .one {
  -webkit-transform: rotateX(90deg) translateZ(400px);
  transform: rotateX(90deg) translateZ(400px);
}

#cube .two {
  -webkit-transform: translateZ(400px);
  transform: translateZ(400px);
}

#cube .three {
  -webkit-transform: rotateY(90deg) translateZ(400px);
  transform: rotateY(90deg) translateZ(400px);
}

#cube .four {
  -webkit-transform: rotateY(180deg) translateZ(400px);
  transform: rotateY(180deg) translateZ(400px);
}

#cube .five {
  -webkit-transform: rotateY(-90deg) translateZ(400px);
  transform: rotateY(-90deg) translateZ(400px);
}

#cube .six {
  -webkit-transform: rotateX(-90deg) translateZ(300px) rotate(180deg);
  transform: rotateX(-90deg) translateZ(300px) rotate(180deg);
}