teenagegoths

cube with switches

Sep 10th, 2021 (edited)
156
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <head>
  2. <meta charset="UTF-8">
  3. <style>
  4. * { box-sizing: border-box; }
  5.  
  6. body { font-family: sans-serif; }
  7.  
  8. .scene {
  9. width: 300px;
  10. height: 300px;
  11.  
  12. margin: 80px;
  13. perspective: 600px;
  14. }
  15.  
  16. .cube {
  17. width: 300px;
  18. height: 300px;
  19. position: relative;
  20. transform-style: preserve-3d;
  21. transform: translateZ(-150px);
  22. transition: transform 1s;
  23. }
  24.  
  25. .cube.show-front { transform: translateZ(-150px) rotateY( 0deg); }
  26. .cube.show-right { transform: translateZ(-150px) rotateY( -90deg); }
  27. .cube.show-back { transform: translateZ(-150px) rotateY(-180deg); }
  28. .cube.show-left { transform: translateZ(-150px) rotateY( 90deg); }
  29. .cube.show-top { transform: translateZ(-150px) rotateX( -90deg); }
  30. .cube.show-bottom { transform: translateZ(-150px) rotateX( 90deg); }
  31.  
  32. .cube__face {
  33. position: absolute;
  34. width: 300px;
  35. height: 300px;
  36. border: 2px solid black;
  37. line-height: 300px;
  38. font-size: 40px;
  39. font-weight: bold;
  40. color: white;
  41. text-align: center;
  42. }
  43.  
  44. .cube__face--front { background: hsla( 0, 100%, 50%, 0.7); }
  45. .cube__face--right { background: hsla( 60, 100%, 50%, 0.7); }
  46. .cube__face--back { background: hsla(120, 100%, 50%, 0.7); }
  47. .cube__face--left { background: hsla(180, 100%, 50%, 0.7); }
  48. .cube__face--top { background: hsla(240, 100%, 50%, 0.7); }
  49. .cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); }
  50.  
  51. .cube__face--front { transform: rotateY( 0deg) translateZ(150px); }
  52. .cube__face--right { transform: rotateY( 90deg) translateZ(150px); }
  53. .cube__face--back { transform: rotateY(180deg) translateZ(150px); }
  54. .cube__face--left { transform: rotateY(-90deg) translateZ(150px); }
  55. .cube__face--top { transform: rotateX( 90deg) translateZ(150px); }
  56. .cube__face--bottom { transform: rotateX(-90deg) translateZ(150px); }
  57.  
  58. label { margin-right: 10px; }
  59. </style>
  60. </head>
  61. <body>
  62. <!-- partial:index.partial.html -->
  63. <div class="scene">
  64. <div class="cube">
  65. <div class="cube__face cube__face--front">front</div>
  66. <div class="cube__face cube__face--back"><div id="front"></div></div>
  67. <div class="cube__face cube__face--right">right</div>
  68. <div class="cube__face cube__face--left">left</div>
  69. <div class="cube__face cube__face--top">top</div>
  70. <div class="cube__face cube__face--bottom">bottom</div>
  71. </div>
  72. </div></div>
  73.  
  74. <!-- partial -->
  75. <p class="radio-group">
  76. <label>
  77. <input type="radio" name="rotate-cube-side" value="front" checked /> front
  78. </label>
  79. <label>
  80. <input type="radio" name="rotate-cube-side" value="right" /> right
  81. </label>
  82. <label>
  83. <input type="radio" name="rotate-cube-side" value="back" /> back
  84. </label>
  85. <label>
  86. <input type="radio" name="rotate-cube-side" value="left" /> left
  87. </label>
  88. <label>
  89. <input type="radio" name="rotate-cube-side" value="top" /> top
  90. </label>
  91. <label>
  92. <input type="radio" name="rotate-cube-side" value="bottom" /> bottom
  93. </label>
  94. </p>
  95. <script>var cube = document.querySelector('.cube');
  96. var radioGroup = document.querySelector('.radio-group');
  97. var currentClass = '';
  98.  
  99. function changeSide() {
  100. var checkedRadio = radioGroup.querySelector(':checked');
  101. var showClass = 'show-' + checkedRadio.value;
  102. if ( currentClass ) {
  103. cube.classList.remove( currentClass );
  104. }
  105. cube.classList.add( showClass );
  106. currentClass = showClass;
  107. }
  108. // set initial side
  109. changeSide();
  110.  
  111. radioGroup.addEventListener( 'change', changeSide );</script>
  112.  
  113. </body>
  114. </html>
RAW Paste Data Copied