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