tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

animate-cube-degrees.html (825B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <title>Reftest, bug 1156456</title>
      4 <style>
      5 
      6 html, body {
      7  height: 100%;
      8 }
      9 
     10 body {
     11  background: white;
     12  perspective: 1000px;
     13 }
     14 
     15 div, div::before, div::after {
     16  width: 200px; height: 200px;
     17 }
     18 
     19 @keyframes HoldTransform {
     20  from, to {
     21    transform: rotateY(-120deg) rotateX(60deg);
     22  }
     23 }
     24 
     25 div {
     26  position: absolute;
     27  top: 0; right: 0; bottom: 0; left: 0;
     28  margin: auto;
     29  transform-origin: 50% 50% 100px;
     30  background: #006;
     31  transform-style: preserve-3d;
     32  animation: 10s HoldTransform infinite;
     33 }
     34 
     35 div::before, div::after {
     36  position: absolute;
     37  top: 0; left: 0;
     38  content: "";
     39 }
     40 
     41 div::before {
     42  background: #00f;
     43  transform: translate3D(100px, 0, 100px) rotateY(90deg);
     44 }
     45 
     46 div::after {
     47  background: #00c;
     48  transform: translate3D(0, -100px, 100px) rotateX(90deg);
     49 }
     50 
     51 </style>
     52 <div></div>