View cube style tweaks

This commit is contained in:
Mike Molinari 2022-11-18 02:07:16 +00:00
parent 8fc592f3e2
commit dd2cab8254
2 changed files with 16 additions and 15 deletions

View file

@ -25,40 +25,41 @@
position: absolute;
width: 100px;
height: 100px;
border: 2px solid black;
padding:0px;
border: 5px solid black;
line-height: 100px;
font-size: 20px;
font-size: 26px;
font-weight: bold;
color: white;
color: rgb(0, 0, 0);
text-align: center;
}
.front {
background: rgba(0, 0, 255, 0.7);
background: rgba(102, 102, 255, 0.95);
transform: rotateY(0deg) rotateX(180deg) translateZ(-50px);
}
.right {
background: rgba(255, 0, 0, 0.7);
background: rgba(255, 0, 0, 0.95);
transform: rotateY(90deg) rotateX(180deg) translateZ(-50px);
}
.back {
background: rgba(0, 255, 255, 0.7);
background: rgba(0, 255, 255, 0.95);
transform: rotateY(180deg) rotateX(180deg) translateZ(-50px);
}
.left {
background: rgba(255, 0, 255, 0.7);
background: rgba(255, 0, 255, 0.95);
transform: rotateY(-90deg) rotateX(180deg) translateZ(-50px);
}
.top {
background: rgba(0, 255, 0, 0.7);
background: rgba(0, 255, 0, 0.95);
transform: rotateX(-90deg) rotateX(180deg) translateZ(-50px);
}
.bottom {
background: rgba(255, 255, 0, 0.7);
background: rgba(255, 255, 0, 0.95);
transform: rotateX(90deg) rotateX(180deg) translateZ(-50px);
}

View file

@ -20,12 +20,12 @@ export function ViewCube() {
<div className={ls.cube} style={{
transform: `translateZ(-300px) ${cssMatrix}`
}}>
<div className={cx(ls.face, ls.front)} onClick={() => context.actionService.run('StandardViewFront')}> front</div>
<div className={cx(ls.face, ls.back)} onClick={() => context.actionService.run('StandardViewBack')}>back</div>
<div className={cx(ls.face, ls.right)} onClick={() => context.actionService.run('StandardViewRight')}>right</div>
<div className={cx(ls.face, ls.left)} onClick={() => context.actionService.run('StandardViewLeft')}>left</div>
<div className={cx(ls.face, ls.top)} onClick={() => context.actionService.run('StandardViewTop')}>top</div>
<div className={cx(ls.face, ls.bottom)} onClick={() => context.actionService.run('StandardViewBottom')}>bottom</div>
<div className={cx(ls.face, ls.front)} onClick={() => context.actionService.run('StandardViewFront')}>Front</div>
<div className={cx(ls.face, ls.back)} onClick={() => context.actionService.run('StandardViewBack')}>Back</div>
<div className={cx(ls.face, ls.right)} onClick={() => context.actionService.run('StandardViewRight')}>Right</div>
<div className={cx(ls.face, ls.left)} onClick={() => context.actionService.run('StandardViewLeft')}>Left</div>
<div className={cx(ls.face, ls.top)} onClick={() => context.actionService.run('StandardViewTop')}>Top</div>
<div className={cx(ls.face, ls.bottom)} onClick={() => context.actionService.run('StandardViewBottom')}>Bottom</div>
</div>
</div>