figure
{
margin:0
}
.container3d {
width: 300px;
height: 465px;
position: relative;
margin: 0px auto 0 auto;
display:none; -webkit-perspective: 1200px;
-moz-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
#box1, #box2, #box3, #box4, #box5  {
width: 100%;
position: absolute;
height: 80px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#box6  {
width: 100%;
position: absolute;
height: 40px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#box1
{
}
#box2
{
top: 85px;
}
#box3
{
top: 170px;
}
#box4
{
top: 255px;
}
#box5
{
top: 340px;
}
#box6
{
top: 425px;
}
figure {
display: block;
position: absolute;
line-height: 80px;
font-size: 25px;
font-family: "rockwell",sans-serif;
font-style: normal;
font-weight: 300;
text-align: center;
text-transform: lowercase;
color: rgb(255, 255, 255);
opacity:0
}
.short-trans
{
-webkit-transition: -webkit-transform .2s ease-in 0s !important;
-moz-transition: -moz-transform  .2s ease-in 0s !important;
-o-transition: -o-transform  .2s ease-in 0s !important;
transition: transform  .2s ease-in 0s !important;
}
.menuContainer
{
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0; z-index: 1000;
}
.panels-backface-invisible figure {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.front,
.back {
width: 300px;
height: 80px;
}
.right,
.left {
width: 300px;
height: 80px;
left: 0;
}
.top {
width: 300px;
height: 300px;
top: 0;
line-height: 300px;
}
.bottom {
width: 300px;
height: 300px;
top: 80px;
line-height: 300px;
}  .frontHome,
.backHome {
width: 300px;
height: 40px;
}
.rightHome,
.leftHome {
width: 300px;
height: 40px;
left: 0;
}
.topHome {
width: 300px;
height: 300px;
top: 0;
line-height: 300px;
}
.bottomHome {
width: 300px;
height: 300px;
top: 40px;
line-height: 300px;
}
.front, .frontHome
{
background: rgba( 53, 53, 53, 1 );
}
.back, .backHome
{
background-image: url(https://www.velvetrobot.com/wp-content/themes/naked-wordpress-master/img/3dbutt-off.svg);
background-repeat: no-repeat;
background-size: cover; cursor: pointer;
}
.right, .rightHome { background: #1b1b1c; }
.left, .leftHome { background: #1b1b1c; }
.top, .topHome { background: #1b1b1c; }
.bottom, .bottomHome { background: #1b1b1c; }
.no-touchevents .back:hover, .no-touchevents .backHome:hover
{
background-image: url(https://www.velvetrobot.com/wp-content/themes/naked-wordpress-master/img/3dbutt-on.svg);
background-repeat: no-repeat;
background-size: cover;
}
.front, .frontHome  {
-webkit-transform: translateZ( 150px );
-moz-transform: translateZ( 150px );
-o-transform: translateZ( 150px );
transform: translateZ( 150px );
}
.back, .backHome   {
-webkit-transform: rotateX( -180deg ) rotateZ( 180deg ) translateZ( 150px );
-moz-transform: rotateX( -180deg ) rotateZ( 180deg ) translateZ( 150px );
-o-transform: rotateX( -180deg ) rotateZ( 180deg ) translateZ( 150px );
transform: rotateX( -180deg ) rotateZ( 180deg ) translateZ( 150px );
}
.right, .rightHome {
-webkit-transform: rotateY(   90deg ) translateZ( 150px );
-moz-transform: rotateY(   90deg ) translateZ( 150px );
-o-transform: rotateY(   90deg ) translateZ( 150px );
transform: rotateY(   90deg ) translateZ( 150px );
}
.left, .leftHome {
-webkit-transform: rotateY(  -90deg ) translateZ( 150px ); -moz-transform: rotateY(  -90deg ) translateZ( 150px ); -o-transform: rotateY(  -90deg ) translateZ( 150px ); transform: rotateY(  -90deg ) translateZ( 150px ); }
.top, .topHome {
-webkit-transform: rotateX(   90deg ) translateZ( 150px );
-moz-transform: rotateX(   90deg ) translateZ( 150px );
-o-transform: rotateX(   90deg ) translateZ( 150px );
transform: rotateX(   90deg ) translateZ( 150px );
}
.bottom, .bottomHome {
-webkit-transform: rotateX(  -90deg ) translateZ( -150px );
-moz-transform: rotateX(  -90deg ) translateZ( -150px );
-o-transform: rotateX(  -90deg ) translateZ( -150px );
transform: rotateX(  -90deg ) translateZ( -150px );
}
.show-front {
transform: translate3d(0, 0, -1500px) rotate3d(0, 1, 0, 0deg);
}
.show-back {
-webkit-transform: translateZ( -80px ) rotateY( -180deg );
-moz-transform: translateZ( -80px ) rotateY( -180deg );
-o-transform: translateZ( -80px ) rotateY( -180deg );
transform: translateZ( -80px ) rotateY( -180deg );
}
.show-right {
-webkit-transform: translateZ( -150px ) rotateY(  -90deg );
-moz-transform: translateZ( -150px ) rotateY(  -90deg );
-o-transform: translateZ( -150px ) rotateY(  -90deg );
transform: translateZ( -150px ) rotateY(  -90deg );
}
.show-left {
-webkit-transform: translateZ( -150px ) rotateY( 45deg );
-moz-transform: translateZ( -150px ) rotateY( 45deg );
-o-transform: translateZ( -150px ) rotateY( 45deg );
transform: translateZ( -150px ) rotateY( 45deg );
}
.show-top {
-webkit-transform: translateZ( -160px ) rotateX(  -90deg );
-moz-transform: translateZ( -160px ) rotateX(  -90deg );
-o-transform: translateZ( -160px ) rotateX(  -90deg );
transform: translateZ( -160px ) rotateX(  -90deg );
}
.show-bottom {
-webkit-transform: translateZ( -160px ) rotateX(   90deg );
-moz-transform: translateZ( -160px ) rotateX(   90deg );
-o-transform: translateZ( -160px ) rotateX(   90deg );
transform: translateZ( -160px ) rotateX(   90deg );
}
.spin-left  {
-webkit-transform: translateZ( -150px ) rotate3d(0, 1, 0, 180deg);
-moz-transform: translateZ( -150px ) rotateY( -180deg );
-o-transform: translateZ( -150px ) rotateY( -180deg );
transform: translateZ( -150px ) rotate3d(0, 1, 0, 180deg);
} .spinLeftT
{
transform: translate3d(0, 0, -150px) rotate3d(0, 1, 0, 540deg);
opacity: 1;
}
.spin-left1, .spin-left2, .spin-left3, .spin-left4, .spin-left5, .spin-left6
{
animation-duration: 0.8s;
animation-name: spinMeLeft;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.text3d
{
opacity: 0;
}
.showText3d
{
animation-duration: .1s;
animation-name: showMeAnim;
-webkit-animation-delay: .1s;
animation-delay: .3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.spin-left2
{
-webkit-animation-delay: .1s;
animation-delay: .1s;
}
.spin-left3
{
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
.spin-left4
{
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
.spin-left5
{
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.spin-left6
{
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
@keyframes spinMeLeft {
0% {
-webkit-transform: translate3d(0, 0, -1500px) rotate3d(0, 1, 0, 0deg);
-moz-transform: translate3d(0, 0, -1500px) rotate3d(0, 1, 0, 0deg);
-o-transform: translate3d(0, 0, -1500px) rotate3d(0, 1, 0, 0deg);
transform: translate3d(0, 0, -1500px) rotate3d(0, 1, 0, 0deg);
}
100% {
-webkit-transform: translate3d(0, 0, -250px) rotate3d(0, 1, 0, 180deg);
-moz-transform: translate3d(0, 0, -250px) rotate3d(0, 1, 0, 180deg);
-o-transform: translate3d(0, 0, -250px) rotate3d(0, 1, 0, 180deg);
transform: translate3d(0, 0, -250px) rotate3d(0, 1, 0, 180deg);
transform-style: flat;
}
} .spin-right1, .spin-right2, .spin-right3, .spin-right4, .spin-right5, .spin-right6
{
animation-duration: .5s;
animation-name: spinMeRight;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.spin-right2
{
-webkit-animation-delay: .1s;
animation-delay: .1s;
}
.spin-right3
{
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
.spin-right4
{
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
.spin-right5
{
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
.spin-right6
{
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
@keyframes spinMeRight {
0% {
-webkit-transform: translate3d(0, 0, -250px) rotate3d(0, 1, 0, 180deg);
-moz-transform: translate3d(0, 0, -250px) rotate3d(0, 1, 0, 180deg);
-o-transform: translate3d(0, 0, -250px) rotate3d(0, 1, 0, 180deg);
transform: translate3d(0, 0, -250px) rotate3d(0, 1, 0, 180deg);
}
100% {
-webkit-transform: translate3d(0, 0, -1500px) rotate3d(0, 1, 0, 0deg);
-moz-transform: translate3d(0, 0, -1500px) rotate3d(0, 1, 0, 0deg);
-o-transform: translate3d(0, 0, -1500px) rotate3d(0, 1, 0, 0deg);
transform: translate3d(0, 0, -1500px) rotate3d(0, 1, 0, 0deg);
}
}
.hideMe1, .hideMe2, .hideMe3, .hideMe4, .hideMe5, .hideMe6
{
animation-duration: .5s !important;
animation-name: hideMeAnim  !important;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.hideMe1 { animation-delay: 0.75s  !important; }
.hideMe2 { animation-delay: 0.55s  !important; }
.hideMe3 { animation-delay: 0.60s !important; }
.hideMe4 { animation-delay: 0.65s !important; }
.hideMe5 { animation-delay: 0.70s !important; }
.hideMe6 { animation-delay: 0.75s !important; }
@keyframes hideMeAnim {
from {
opacity:1
}
to {
opacity:0
}
}
.showMe1, .showMe2, .showMe3, .showMe4, .showMe5, .showMe6
{
animation-duration: 0.2s;
animation-name: showMeAnim;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.showMe1 { animation-delay: 0s; }
.showMe2 { animation-delay: 0.05s; }
.showMe3 { animation-delay: 0.1s; }
.showMe4 { animation-delay: 0.15s; }
.showMe5 { animation-delay: 0.2s; }
.showMe6 { animation-delay: 0.25s; }
@keyframes showMeAnim {
from {
opacity:0
}
to {
opacity:1
}
}
.alphaMe1, .alphaMe2, .alphaMe3, .alphaMe4, .alphaMe5, .alphaMe6
{
animation-duration: 0.2s;
animation-name: alphaMeAnim;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
animation-delay: 1.3s;
} @keyframes alphaMeAnim {
from {
opacity:1
}
to {
opacity:1
}
}