const
doc = document,
qS = `querySelector`,
qSA = `querySelectorAll`,
root = doc[ qS ]( `html` ),
cubeContainer = doc[ qS ]( `.cube-container` ),
cubeWrap = doc[ qS ]( `.cube-wrap` ),
cube = doc[ qS ]( `.cube` ),
aside = doc[ qS ]( `aside` );
function clicked( event ) {
const element = event.target;
if( element.classList == `x-rotate` ) {
cubeContainer.style.transform +=
`rotateY( 45deg )`;
}
if( element.classList == `y-rotate` ) {
cubeWrap.style.transform +=
`rotateX( -45deg )`;
}
if( element.classList == `z-rotate` ) {
cube.style.transform +=
`rotateZ( 45deg )`;
}
}
aside.addEventListener( `click`, clicked );body, section, aside, div {
display: flex;
justify-content: center;
align-items: center;
}
::selection {
background-color: var( --dim );
}
:root {
--length: 10rem;
--dim: rgba( 0,0,0,0.125 );
}
* {
box-sizing: border-box;
transform-style: preserve-3d;
margin: 0;
padding: 0;
}
html, body {
overflow: hidden;
height: 100%;
}
html {
font-size: 0.9rem;
}
body {
perspective: 15rem;
font-family: Arial;
}
.scene-wrap {
transform: translateZ( -7.5rem );
}
/* More CSS styles here */
<!-- \\\ \\ \\ SCENE CONTAINER // // /// -->
<section class='scene-container'>
<!-- \\ \\\ \\\ SCENE WRAP /// /// // -->
<section class='scene-wrap'>
<!-- \\\ \\\ \\\ SCENE /// /// /// -->
<section class='scene'>
<!-- \ \ \ CUBE CONTAINER / / / -->
<div class='cube-container'>
<!-- \ \ \ CUBE WRAP / / / -->
<div class='cube-wrap'>
<!-- \ \ \ CUBE / / / -->
<div class='cube'>
<!-- \ front-back / -->
<div class='front-back'>
<!-- More HTML code here -->
</div>
</div>
</div>
</section>
</section>
</section>
</section>
<!-- /// // // SCENE CONTAINER \\ \\ \\\ -->
<!-- \\\ \\\ \\\ ASIDE /// /// /// -->
<aside>
<svg class='x-rotate'>
<path
class='x-rotate'
d=
'
M 42,75
C 50,70,58,63,65,59
C 58,53,50,48,42,43
V 53
C -25,44,56,28,82,41
C 91,46,78,50,72,51
V 62
C 114,51,100,28,59,26
C 18,24,-14,41,10,56
C 21,62,30,62,42,64
Z
'
/>
</svg>
<!-- More SVG code for controls -->
</aside>
<!-- /// /// /// ASIDE \\\ \\\ \\\ -->The provided snippet applies rotations to a cube relative to its current position. However, the goal is to rotate the cube globally with respect to the document's "view". Each click on a rotation control button should reset and apply new rotations without considering previous transforms.