SHARE
TWEET

Untitled

a guest Jun 20th, 2019 47 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>JS Bin</title>
  7. <style id="jsbin-css">
  8. @keyframes roll {
  9.   from {
  10.     transform: rotate(0deg);
  11.   }
  12.   25% {
  13.     transform: rotateX(360deg) rotateY(360deg);
  14.   }
  15.   50% {
  16.     transform: rotate(0deg);
  17.   }
  18.   75% {
  19.     transform: rotateX(-360deg) rotateY(-360deg);
  20.   }
  21.   to {
  22.     transform: rotate(0deg);
  23.   }
  24.  
  25. }
  26. .cube {
  27.   width: 100px;
  28.   margin: 0 auto;
  29.   transform: rotateY(45deg) rotateX(245deg);
  30.   xanimation: roll 10s linear infinite;
  31.   transform-style: preserve-3d;
  32.   transition: all 2s;
  33. }
  34.  .box-part {
  35.   width: 100px;
  36.   height: 100px;
  37.   transform-origin: bottom;
  38.   background-blend-mode: overlay;
  39.   outline: 2px solid rgba(230, 0, 200, .7);
  40.   transition: transform 2s;
  41. }
  42.  
  43.  
  44. .four {
  45.   transform-origin: left;
  46.   transform: translate(100px, -100px) rotateY(90deg);;
  47. }
  48. .four {
  49.     background-image: linear-gradient(45deg, #000, #0ff), linear-gradient(135deg, #0f0, #00f);
  50. }
  51.  
  52.  
  53. .one {
  54.   transform-origin: right;
  55.   transform: translate(-100px, 200px) rotateY(-90deg);
  56. }
  57. .one {
  58.   background-image: linear-gradient(45deg, #f00, #fff), linear-gradient(135deg, #ff0, #f0f);
  59. }
  60.  .two {
  61.   transform: rotateX(90deg);
  62. }
  63.  
  64. .other {
  65.   transform-origin: top;
  66.     transform-style: preserve-3d;
  67.   transform: translateY(-100px) rotateX(-90deg);
  68. }
  69.  
  70.  .last {
  71.   transform-origin: top;
  72.   transform: rotateX(-90deg);
  73. }
  74.  
  75. /* color */
  76.  
  77. .three {
  78.   background-image: linear-gradient(45deg, #f0f, #0ff), linear-gradient(135deg, #fff, #00f);
  79. }
  80.  
  81. .two {
  82.   background-image: linear-gradient(45deg, #ff0, #0ff), linear-gradient(135deg, #0f0, #fff);
  83. }
  84. .six {
  85.   background-image: linear-gradient(45deg, #ff0, #000), linear-gradient(135deg, #f00, #0f0);
  86. }
  87.  
  88. .five {
  89.     background-image: linear-gradient(45deg, #00f, #f00), linear-gradient(135deg, #f0f, #000);
  90. }
  91. </style>
  92. </head>
  93. <body>
  94. <div class="cube">
  95. <div>
  96.     <div class="box-part one">1</div>
  97.     <div class="box-part two">2</div>
  98.     <div class="box-part three">3</div>
  99.     <div class="box-part four">4</div>
  100.     <div class="other">
  101.       <div class="box-part five">5</div>
  102.       <div class="box-part last six">6           </div>
  103.   </div>
  104. </div>
  105. </div>
  106.  
  107.  
  108. <script id="jsbin-source-css" type="text/css">@keyframes roll {
  109.   from {
  110.     transform: rotate(0deg);
  111.   }
  112.   25% {
  113.     transform: rotateX(360deg) rotateY(360deg);
  114.   }
  115.   50% {
  116.     transform: rotate(0deg);
  117.   }
  118.   75% {
  119.     transform: rotateX(-360deg) rotateY(-360deg);
  120.   }
  121.   to {
  122.     transform: rotate(0deg);
  123.   }
  124.  
  125. }
  126. .cube {
  127.   width: 100px;
  128.   margin: 0 auto;
  129.   transform: rotateY(45deg) rotateX(245deg);
  130.   xanimation: roll 10s linear infinite;
  131.   transform-style: preserve-3d;
  132.   transition: all 2s;
  133. }
  134.  .box-part {
  135.   width: 100px;
  136.   height: 100px;
  137.   transform-origin: bottom;
  138.   background-blend-mode: overlay;
  139.   outline: 2px solid rgba(230, 0, 200, .7);
  140.   transition: transform 2s;
  141. }
  142.  
  143.  
  144. .four {
  145.   transform-origin: left;
  146.   transform: translate(100px, -100px) rotateY(90deg);;
  147. }
  148. .four {
  149.     background-image: linear-gradient(45deg, #000, #0ff), linear-gradient(135deg, #0f0, #00f);
  150. }
  151.  
  152.  
  153. .one {
  154.   transform-origin: right;
  155.   transform: translate(-100px, 200px) rotateY(-90deg);
  156. }
  157. .one {
  158.   background-image: linear-gradient(45deg, #f00, #fff), linear-gradient(135deg, #ff0, #f0f);
  159. }
  160.  .two {
  161.   transform: rotateX(90deg);
  162. }
  163.  
  164. .other {
  165.   transform-origin: top;
  166.     transform-style: preserve-3d;
  167.   transform: translateY(-100px) rotateX(-90deg);
  168. }
  169.  
  170.  .last {
  171.   transform-origin: top;
  172.   transform: rotateX(-90deg);
  173. }
  174.  
  175. /* color */
  176.  
  177. .three {
  178.   background-image: linear-gradient(45deg, #f0f, #0ff), linear-gradient(135deg, #fff, #00f);
  179. }
  180.  
  181. .two {
  182.   background-image: linear-gradient(45deg, #ff0, #0ff), linear-gradient(135deg, #0f0, #fff);
  183. }
  184. .six {
  185.   background-image: linear-gradient(45deg, #ff0, #000), linear-gradient(135deg, #f00, #0f0);
  186. }
  187.  
  188. .five {
  189.     background-image: linear-gradient(45deg, #00f, #f00), linear-gradient(135deg, #f0f, #000);
  190. }</script>
  191. </body>
  192. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top