<div class="demo-cont">
<div class="demo">
<div class="demo__btm">
<div class="demo__btm-bottom">
<div class="my-links">
<a href="https://twitter.com/NikolayTalanov" target="_blank">Twitter</a>
<a href="https://codepen.io/suez/public/" target="_blank">My other demos</a>
</div>
</div>
<div class="demo__btm-side m--left"></div>
<div class="demo__btm-side m--front"></div>
<div class="demo__btm-side m--right"></div>
<div class="demo__btm-side m--back"></div>
<div class="demo__btm-top"></div>
</div>
<div class="demo__mid">
<div class="demo__mid-bottom"></div>
<div class="demo__mid-side m--left"></div>
<div class="demo__mid-side m--front"></div>
<div class="demo__mid-side m--right"></div>
<div class="demo__mid-side m--back"></div>
<div class="demo__mid-top"></div>
</div>
<div class="demo__top">
<div class="demo__top-bottom"></div>
<div class="demo__top-side m--left"></div>
<div class="demo__top-side m--front"></div>
<div class="demo__top-side m--right"></div>
<div class="demo__top-side m--back"></div>
<div class="demo__top-top"></div>
</div>
<div class="demo__panelBack">
<div class="demo__panelBack-bottom">
<h1 class="heading">Pure css 3d synthesizer</h1>
</div>
<div class="demo__panelBack-side m--left"></div>
<div class="demo__panelBack-side m--front"></div>
<div class="demo__panelBack-side m--right"></div>
<div class="demo__panelBack-side m--back"></div>
<div class="demo__panelBack-top"></div>
</div>
<div class="demo__panelFrontL">
<div class="demo__panelFrontL-bottom"></div>
<div class="demo__panelFrontL-side m--left"></div>
<div class="demo__panelFrontL-side m--front"></div>
<div class="demo__panelFrontL-side m--right"></div>
<div class="demo__panelFrontL-side m--back"></div>
<div class="demo__panelFrontL-top"></div>
</div>
<div class="demo__panelFrontR">
<div class="demo__panelFrontR-bottom"></div>
<div class="demo__panelFrontR-side m--left"></div>
<div class="demo__panelFrontR-side m--front"></div>
<div class="demo__panelFrontR-side m--right"></div>
<div class="demo__panelFrontR-side m--back"></div>
<div class="demo__panelFrontR-top"></div>
</div>
<div class="demo__panelKeys">
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
<div class="demo__panelKeys-key">
<div class="demo__panelKeys-key-bottom"></div>
<div class="demo__panelKeys-key-side m--left"></div>
<div class="demo__panelKeys-key-side m--front"></div>
<div class="demo__panelKeys-key-side m--right"></div>
<div class="demo__panelKeys-key-side m--back"></div>
<div class="demo__panelKeys-key-top"></div>
</div>
</div>
</div>
</div>
<p class="you-can">You can rotate camera with pressed mouse</p>
<button type="button" class="rerun">Rerun appearance animation</button>@import "compass/css3";
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
font-size: 62.5%;
height: 100%;
}
body {
background: #CEE5D5;
cursor: all-scroll;
}
$subPixel: 0.05rem;
$mainColor: #334A5C;
$midColor: mix(black, $mainColor, 15%);
$lightColor: #4A6473;
$semiLight: mix(black, $lightColor, 10%);
$lightGreen: #79AFA9;
$width: 80rem;
$sideWidth: 20rem;
$bottomSideHeight: 4rem;
$bottomAngle: 20deg;
$bottomSinW: sin($bottomAngle);
$bottomCosH: cos($bottomAngle);
$bottomHeight: $bottomCosH*$bottomSideHeight;
$bottomPartWidth: $bottomSideHeight*$bottomSinW;
$bigWidth: $width + $bottomPartWidth*2;
$bigHeight: $sideWidth + $bottomPartWidth*2;
$midHeight: 0.6rem;
$topSideHeight: 1.5rem;
$topAngle: 20deg;
$topSinW: sin($topAngle);
$topCosH: cos($topAngle);
$topHeight: $topCosH*$topSideHeight;
$topPartWidth: $topSideHeight*$topSinW;
$PBSideHeight: 2.5rem;
$PBAngle: 20deg;
$PBSinW: sin($PBAngle);
$PBCosH: cos($PBAngle);
$PBHeight: $PBCosH*$PBSideHeight;
$PBPartWidth: $PBSideHeight*$PBSinW;
$topPlatformSideW: $sideWidth + $topPartWidth*2;
$PBSideWidth: $topPlatformSideW*0.3;
$PBAngledSideWidth: $PBSideWidth + $PBPartWidth;
$PFLSideWidth: $topPlatformSideW*0.7 - $PBPartWidth*2;
$PFLSPattern: $PFLSideWidth * 0.035;
$panelTopW: $width + $topPartWidth*2 - $PBPartWidth*2;
$PFLWidth: ($width + $topPartWidth*2 - $PBPartWidth*2) * 0.15;
$PFRWidth: $PFLWidth/4;
$keysWidth: $panelTopW - $PFLWidth - $PFRWidth;
$keyHeight: 1rem;
$keyWidth: $keysWidth / 25;
$numOfKeys: 20;
$keyMargin: $keysWidth / 5 / ($numOfKeys - 1);
// Z VALUES
$bottomZ: -10rem;
$midZ: $bottomZ + $bottomHeight;
$topZ: $midZ + $midHeight;
$PBZ: $topZ + $topHeight;
// ANIMS
$btmATime: 1s;
$midDelay: $btmATime;
$midATime: 0.7s;
$topDelay: $midATime + $midDelay;
$topATime: 1s;
$panelDelay: $topATime + $topDelay;
$panelATime: 0.7s;
$keysDelay: $panelATime + $panelDelay;
$keysATime: 1s;
@mixin platform($Z, $rotate: 0, $partW: 0, $bgColor: $mainColor, $SW: $sideWidth, $fullW: $width, $partH: 0) {
@if $partH == 0 {
$partH: $partW*2;
}
position: absolute;
left: -$partW;
top: -$partW;
width: $fullW + $partW*2;
height: $SW + $partH;
background-color: $bgColor !important;
transform: translateZ($Z) rotateY($rotate);
}
@mixin bottom($partW: 0) {
position: absolute;
left: -$partW;
top: -$partW;
$W: if($partW == 0, 0px, $partW*2);
$H: if($partW == 0, 0px, $partW*2);
width: calc(100% + #{$W});
height: calc(100% + #{$W});
transform: rotateX(180deg);
}
@mixin top($Z, $partW: 0, $addW: 0, $addH: 0) {
position: absolute;
left: -$partW;
top: -$partW;
$W: if($partW == 0, 0px, $partW*2);
width: calc(100% + #{$W});
@if $addW != 0 {
width: calc(100% + #{$addW});
}
$H: if($partW == 0, 0px, $partW*2);
height: calc(100% + #{$W});
@if $addH != 0 {
height: calc(100% + #{$addH});
}
transform: translateZ($Z);
}
@mixin side {
position: absolute;
transform-origin: 50% 100%;
}
@mixin sideLeft($H, $angle: 0, $partW: 0, $SW: $sideWidth) {
left: $SW/-2 - $partW;
top: 50%;
margin-top: -$H;
width: $SW;
height: $H;
transform: rotate(-90deg) rotateX((90deg - $angle) * -1) rotateY(180deg);
}
@mixin sideFront($H, $angle: 0, $partW: 0) {
left: 0;
bottom: 0;
width: 100%;
height: $H;
transform: rotateX((90deg + $angle) * -1);
}
@mixin sideRight($H, $angle: 0, $partW: 0, $SW: $sideWidth) {
right: $SW/-2 - $partW;
top: 50%;
margin-top: -$H;
width: $SW;
height: $H;
transform: rotate(90deg) rotateX((90deg - $angle) * -1) rotateY(180deg);
}
@mixin sideBack($H, $angle : 0, $partW: 0) {
left: 0;
top: -$H - $partW;
width: 100%;
height: $H;
transform: rotateY(180deg) rotateX(90deg - $angle);
}
@mixin allSides($H, $angle: 0, $partW: 0, $SW: $sideWidth) {
&.m--left {
@include sideLeft($H, $angle, $partW, $SW);
}
&.m--front {
@include sideFront($H, $angle, $partW);
}
&.m--right {
@include sideRight($H, $angle, $partW, $SW);
}
&.m--back {
@include sideBack($H, $angle, $partW);
}
}
@mixin sideCorners($W, $H, $color: $mainColor, $revW: 0) {
$defaultColor: $color;
$reverseColor: transparent;
$leftShift: $W;
@if $W == 0 {
$defaultColor: transparent;
$reverseColor: $mainColor;
$leftShift: $revW;
}
&:before, &:after {
content: "";
position: absolute;
display: block;
border-style: solid;
background-color: transparent !important;
}
&:before {
left: -$leftShift;
top: 0;
border-width: 0 $W $H $revW;
border-color: transparent $color $reverseColor transparent;
}
&:after {
right: -$leftShift;
top: 0;
border-width: $H $W 0 $revW;
border-color: $color transparent transparent $reverseColor;
}
}
.demo-cont {
position: relative;
height: 100vh;
perspective: 2000px;
}
.demo {
position: absolute;
left: 50%;
top: 50%;
margin-left: $width/-2;
margin-top: $sideWidth/-2;
width: $width;
height: $sideWidth;
transform-style: preserve-3d;
transform: rotateX(75deg) rotateZ(-50deg);
will-change: transform;
user-select: none;
div, div:before, div:after {
//backface-visibility: hidden;
transform-style: preserve-3d;
background-color: inherit;
}
&__btm {
@include platform($bottomZ, 0);
transform: translateZ($bottomZ*2);
opacity: 0;
animation: btmAnim $btmATime forwards;
&-bottom {
@include bottom;
}
&-top {
@include top($bottomHeight - $subPixel, $bottomPartWidth);
}
&-side {
@include side;
@include allSides($bottomSideHeight, $bottomAngle);
@include sideCorners($bottomPartWidth, $bottomSideHeight);
}
}
&__mid {
@include platform($midZ, 0, 0, $midColor);
transform: translateZ(-$midZ*2);
opacity: 0;
animation: midAnim $midATime $midDelay forwards;
&-bottom {
@include bottom;
}
&-top {
@include top($midHeight);
}
&-side {
@include side;
@include allSides($midHeight);
}
}
&__top {
@include platform($topZ + $topHeight, 180deg, $topPartWidth, $mainColor);
$topSideWidth: $sideWidth + $topPartWidth*2;
transform: translateZ(($topZ + $topHeight)*-1.5) rotateY(180deg);
opacity: 0;
animation: topAnim $topATime $topDelay forwards;
&-bottom {
@include bottom;
}
&-top {
@include top($topHeight - $subPixel, $topPartWidth);
}
&-side {
@include side;
@include allSides($topSideHeight, $topAngle, 0, $topSideWidth);
@include sideCorners($topPartWidth, $topSideHeight);
}
}
&__panelBack {
@include platform($PBZ + $PBHeight, 180deg, 0, $lightColor, $PBSideWidth, $width + $topPartWidth*2 - $PBPartWidth*2);
left: $PBPartWidth/2;
top: $PBPartWidth/2;
transform: translateZ(($PBZ + $PBHeight)*-1.5) rotateY(180deg);
opacity: 0;
animation: panelAnim $panelATime $panelDelay forwards;
&-bottom {
@include bottom;
&:before {
content: "";
position: absolute;
left: 0;
top: 2rem;
width: 100%;
height: 0.2rem;
background: #243446 !important;
transform: translateZ(0.1rem);
}
&:after {
content: "";
position: absolute;
left: $PFRWidth;
top: 0.5rem;
width: $keysWidth;
height: 0.7rem;
background: $lightGreen !important;
transform: translateZ(0.1rem);
}
}
&-top {
@include top($PBHeight, $PBPartWidth, 0, $PBPartWidth);
}
&-side {
@include side;
@include allSides($PBSideHeight, $PBAngle, 0, $PBSideWidth);
@include sideCorners($PBPartWidth, $PBSideHeight, $lightColor);
&.m--left:after {
display: none;
}
&.m--front {
@include sideFront($PBSideHeight, 0);
background: $semiLight;
}
&.m--right:before {
display: none;
}
}
}
&__panelFrontL {
@include platform($PBZ + $PBHeight, 180deg, 0, $lightColor, $PFLSideWidth, $PFLWidth);
left: $PBPartWidth/2;
top: $PBSideWidth + $PBPartWidth/2;
transform: translateZ(($PBZ + $PBHeight)*-1.5) rotateY(180deg);
opacity: 0;
animation: panelAnim $panelATime $panelDelay forwards;
&-bottom {
@include bottom;
&:after {
content: "";
position: absolute;
left: 0;
top: 15%;
width: 100%;
height: 3.5%;
background: #283646 !important;
color: #283646;
box-shadow: 0 $PFLSPattern*2, 0 $PFLSPattern*4, 0 $PFLSPattern*6, 0 $PFLSPattern*8, 0 $PFLSPattern*10, 0 $PFLSPattern*12, 0 $PFLSPattern*14, 0 $PFLSPattern*16, 0 $PFLSPattern*18;
transform: translateZ(0.1rem);
}
}
&-top {
@include top($PBHeight, 0, $PBPartWidth, $PBPartWidth);
top: 0;
}
&-side {
@include side;
@include allSides($PBSideHeight, $PBAngle, 0, $PFLSideWidth);
@include sideCorners($PBPartWidth, $PBSideHeight, $lightColor);
&.m--left {
@include sideLeft($PBSideHeight, 0, 0, $PFLSideWidth);
background: $semiLight;
}
&.m--back {
@include sideBack($PBSideHeight, 0);
}
&.m--left:before,
&.m--right:after,
&.m--back:after,
&.m--front:before {
display: none;
}
}
}
&__panelFrontR {
@include platform($PBZ + $PBHeight, 180deg, 0, $lightColor, $PFLSideWidth, $PFRWidth);
left: auto;
right: $PBPartWidth/2;
top: $PBSideWidth + $PBPartWidth/2;
transform: translateZ(($PBZ + $PBHeight)*-1.5) rotateY(180deg);
opacity: 0;
animation: panelAnim $panelATime $panelDelay forwards;
&-bottom {
@include bottom;
}
&-top {
@include top($PBHeight, 0, $PBPartWidth, $PBPartWidth);
top: 0;
left: -$PBPartWidth;
}
&-side {
@include side;
@include allSides($PBSideHeight, $PBAngle, 0, $PFLSideWidth);
@include sideCorners($PBPartWidth, $PBSideHeight, $lightColor);
&.m--right {
@include sideRight($PBSideHeight, 0, 0, $PFLSideWidth);
background: $semiLight;
transform: rotate(90deg) rotateX(-90deg) rotateY(180deg) translateZ(-0.2rem);
&:before {
color: $semiLight;
}
}
&.m--back {
@include sideBack($PBSideHeight, 0);
}
&.m--left:before,
&.m--right:after,
&.m--back:before,
&.m--front:after {
display: none;
}
}
}
&__panelKeys {
position: absolute;
left: $PBPartWidth/2 + $PFLWidth;
top: $PBSideWidth + $PBPartWidth/2;
width: $keysWidth;
height: $PFLSideWidth;
transform: translateZ($PBZ);
&-key {
@include platform(0, 0, 0, #fff, $PFLSideWidth, $keyWidth);
cursor: pointer;
transform-origin: 50% 0;
transform: translateZ(5rem);
opacity: 0;
.demo.ready & {
opacity: 1;
transform: translateZ(0);
}
@for $i from 1 through $numOfKeys {
&:nth-child(#{$i}) {
left: ($i - 1) * ($keyWidth + $keyMargin);
animation: keyAnim $panelATime (($i - 1) * 0.05s + $panelDelay) forwards;
}
}
&.pressed {
animation: keyPress 1s;
}
&-bottom {
@include bottom;
}
&-top {
@include top($keyHeight);
}
&-side {
@include side;
@include allSides($keyHeight, 0, 0, $PFLSideWidth);
background: #cfcfcf !important;
}
}
}
}
.heading {
position: absolute;
left: 50%;
bottom: 0rem;
transform: translate(-50%, -50%) rotate(180deg) translateZ(0.1rem);
color: $lightGreen;
text-transform: uppercase;
font-size: 2rem;
}
@keyframes keyPress {
50% {
transform: rotateX(-3deg);
}
100% {
transform: rotateX(0);
}
}
@keyframes btmAnim {
to {
transform: translateZ($bottomZ);
opacity: 1;
}
}
@keyframes midAnim {
to {
transform: translateZ($midZ);
opacity: 1;
}
}
@keyframes topAnim {
to {
transform: translateZ($topZ + $topHeight) rotateY(180deg);
opacity: 1;
}
}
@keyframes panelAnim {
to {
transform: translateZ($PBZ + $PBHeight) rotateY(180deg);
opacity: 1;
}
}
@keyframes keyAnim {
to {
transform: translateZ(0);
opacity: 1;
}
}
.my-links {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) translateZ(0.1rem);
a {
text-align: center;
color: #fff;
display: block;
margin: 1rem 0;
font-size: 2rem;
}
}
.you-can {
position: absolute;
left: 0.5rem;
top: 0.5rem;
font-size: 1.5rem;
color: #000;
user-select: none;
}
.rerun {
position: absolute;
right: 0.5rem;
background: transparent;
top: 0.5rem;
border: none;
font-size: 2rem;
color: #000;
cursor: pointer;
user-select: none;
&:focus {
outline: none;
}
}
/*
JS used only for camera rotation, key click event's and for appearance animation rerun
*/
$(document).ready(function() {
var winW = $(window).width();
var winH = $(window).height();
var $demo = $(".demo");
var $rerun = $(".rerun");
var rotation = {
x: 75,
z: -50
};
var prevValues = {
x: 0,
y: 0
};
var rotationActive = false;
var startAnimTime = 5400;
var timeout = setTimeout(function() {
$demo.addClass("ready");
}, 4400);
$(document).on("mousedown", function(e) {
var startX = e.pageX;
var startY = e.pageY;
$(document).on("mousemove", function(e) {
var deltaX;
var deltaY;
if (!rotationActive) {
deltaX = startX - e.pageX;
deltaY = startY - e.pageY;
rotationActive = true;
} else {
deltaX = prevValues.x - e.pageX;
deltaY = prevValues.y - e.pageY;
}
prevValues.x = e.pageX;
prevValues.y = e.pageY;
var degX = deltaX * 100 / 360;
var degY = deltaY * 100 / 360;
rotation.x += degY;
rotation.z += degX;
$demo.css("transform", "rotateX("+rotation.x+"deg) rotateZ("+rotation.z+"deg)");
});
$(document).on("mouseup", function(e) {
$(document).off("mousemove");
$(document).off("mouseup");
rotationActive = false;
prevValues.x = 0;
prevValues.y = 0;
});
});
$(document).on("click", ".demo__panelKeys-key", function() {
$(this).removeClass("pressed");
$(this).css("top");
$(this).addClass("pressed");
});
$(document).on("click", ".rerun", function() {
window.clearTimeout(timeout);
$(".demo__panelKeys-key").removeClass("pressed");
$demo.hide().removeClass("ready");
$demo.css("top");
$demo.show();
timeout = setTimeout(function() {
$demo.addClass("ready");
}, 4400);
});
$(window).on("resize", function() {
winW = $(window).width();
winH = $(window).height();
});
});
External CSS
This Pen doesn't use any external CSS resources.