tor-browser

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

animate-cube-radians-zoom.html (908B)

      1 <!DOCTYPE HTML>
      2 <html reftest-zoom="1.5">
      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    /* approximately rotateY(-120deg) rotateX(60deg); */
     22    transform: rotateY(-2.0944rad) rotateX(1.0472rad);
     23  }
     24 }
     25 
     26 div {
     27  position: absolute;
     28  top: 0; right: 0; bottom: 0; left: 0;
     29  margin: auto;
     30  transform-origin: 50% 50% 100px;
     31  background: #006;
     32  transform-style: preserve-3d;
     33  animation: 10s HoldTransform infinite;
     34 }
     35 
     36 div::before, div::after {
     37  position: absolute;
     38  top: 0; left: 0;
     39  content: "";
     40 }
     41 
     42 div::before {
     43  background: #00f;
     44  transform: translate3D(100px, 0, 100px) rotateY(90deg);
     45 }
     46 
     47 div::after {
     48  background: #00c;
     49  transform: translate3D(0, -100px, 100px) rotateX(90deg);
     50 }
     51 
     52 </style>
     53 <div></div>