scss 一支笔由seth kontny。

Posted 2021-05-18

Beyond Rubk's Cube 
-------------------
From http://lsc.org/see-whats-happening/upcoming-exhibitions/cube/ I wish I could go to!


Direct-link: http://lsc.org/wp-content/uploads/2013/08/groovkis-header-678wide.gif
This only looks half decent because there's no lines, need to learn more 3D.

A [Pen](http://codepen.io/sethkontny/pen/aBbph) by [seth kontny](http://codepen.io/sethkontny) on [CodePen](http://codepen.io/).

[License](http://codepen.io/sethkontny/pen/aBbph/license).

<link href='http://fonts.googleapis.com/css?family=Bowlby+One+SC' rel='stylesheet' type='text/css'>
<div class="br">
  <div class="br-cube">    
    <div class='br-cube-face br-cube-face-full br-cube-t'></div> 
    <div class='br-cube-face br-cube-tl'>S E T H</div>   
    <div class='br-cube-face br-cube-tf'>H </div>
    <div class='br-cube-face br-cube-tr'> B</div>
    <div class='br-cube-face br-cube-tb'>T N 'S</div>
    
    <div class='br-cube-face br-cube-ml'>K O N</div>
    <div class='br-cube-face br-cube-mf'>T N Y 'S</div>
    <div class='br-cube-face br-cube-mr'>  </div>
    <div class='br-cube-face br-cube-mb'>  </div>  
    
    <div class='br-cube-face br-cube-dl text-right'> C</div>
    <div class='br-cube-face br-cube-df'>U B E</div>
    <div class='br-cube-face br-cube-dr'>H E L O </div>
    <div class='br-cube-face br-cube-db'>L L O</div>
    <div class='br-cube-face br-cube-face-full br-cube-d'>O</div>    
  </div>
</div>

@import "compass";
body,html { height: 100%; }
$cube-size: 3.1em;
.br {
  position: relative;
  height: 100%;
  width: 100%;
  
  background-color: red;
  color: white;
  font-family: Bowlby One Sc, sans-serif;
  font-size: 50px;
  line-height: 1em;
  text-align:justify;
	  perspective: $cube-size*2;
}
.br-cube {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  height: $cube-size;
  width: $cube-size;
  border: 1px solid purple;  
	  transform-style: preserve-3d;
  transform: rotateY(45deg) rotateX(0);
  animation: datspintho 2.5s .5s ease-in-out infinite;
}
.br-cube-face {
  position: absolute;
  top: 0; bottom: 0;
  margin: auto;
  height: 33.33333333%;
  width: 100%;
  background-color: red;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.br-cube-face-full { height: 100%; }


.br-cube-t  { transform: rotateX(90deg) translateZ($cube-size/2); }
.br-cube-tf { transform: translateY(-$cube-size/3) translateZ($cube-size/2); }
.br-cube-tr { transform: translateY(-$cube-size/3)rotateY(90deg) translateZ($cube-size/2); }
.br-cube-tl { transform: translateY(-$cube-size/3)rotateY(-90deg) translateZ($cube-size/2); }
.br-cube-tb { transform: translateY(-$cube-size/3) translateZ(-$cube-size/2) rotateY(180deg); }


.br-cube-mf { transform: rotateY(10deg) translateZ($cube-size/2); }
.br-cube-mr { transform: rotateY(100deg) translateZ($cube-size/2); }
.br-cube-ml { transform: rotateY(-80deg) translateZ($cube-size/2); }
.br-cube-mb { transform: translateZ(-$cube-size/2) rotateY(190deg); }


.br-cube-d  { transform: rotateY(-10deg) rotateX(-90deg) translateZ($cube-size/2); }
.br-cube-df { transform: rotateY(-10deg) translateY($cube-size/3) translateZ($cube-size/2); }
.br-cube-dr { transform: rotateY(-10deg) translateY($cube-size/3) rotateY(90deg) translateZ($cube-size/2); }
.br-cube-dl { transform: rotateY(-10deg) translateY($cube-size/3) rotateY(-90deg) translateZ($cube-size/2); }
.br-cube-db { transform: rotateY(-10deg) translateY($cube-size/3) translateZ(-$cube-size/2) rotateY(180deg); }

.text-right { text-align: right; }

@keyframes datspintho {
    60% { transform: rotateY(405deg) rotateX(-360deg); }
    61% { transform: rotateY(405deg) rotateX(-360deg); }
    100% { transform: rotateY(405deg) rotateX(-360deg); }
}