mirror of
https://github.com/xibyte/jsketcher
synced 2025-12-20 15:32:57 +01:00
View cube style tweaks
This commit is contained in:
parent
8fc592f3e2
commit
dd2cab8254
2 changed files with 16 additions and 15 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue