cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="port-frame">
	<div class="cube-frame">
		<div class="cube-rotor">
			<div class="face-front">
				<div class="flip-button top" dir="up"></div>
				<div class="flip-button bot" dir="down"></div>
				<div class="flip-button lft" dir="left"></div>
				<div class="flip-button rgt" dir="right"></div>
				<!--div class="flip-button hom" dir="home"></div-->
				<!--div class="scroll-button top" dir="down"></div>
				<div class="scroll-button bot" dir="up"></div>
				<div class="pan-frame">
					<div class="panel">
						<div class="scroll-button end" dir="top"></div>
					</div>
				</div-->
			</div>
			<div class="face-left">
				<div class="flip-button top" dir="up"></div>
				<div class="flip-button bot" dir="down"></div>
				<div class="flip-button lft" dir="left"></div>
				<div class="flip-button rgt" dir="right"></div>
				<div class="flip-button hom" dir="home"></div>
				<div class="scroll-button top" dir="down"></div>
				<div class="scroll-button bot" dir="up"></div>
				<div class="pan-frame">
					<div class="panel">
						<h1>Donec euismod</h1>
						<p>Donec euismod arcu viverra porta luctus. Donec ut turpis vitae augue volutpat tempus tempus eget lacus. Integer egestas ac mi non maximus. Donec aliquet felis odio, a blandit purus ultricies sed. Praesent luctus dolor nec hendrerit suscipit. In hac habitasse platea dictumst. Pellentesque consectetur elementum mauris, et rhoncus odio malesuada id. Duis nec rutrum enim, ac dictum justo. Nam id pulvinar elit. Sed eleifend felis et est convallis, nec sagittis purus tempus. In nec eros ultrices, egestas erat quis, dignissim lacus. Maecenas molestie orci ante, vel fringilla nunc rhoncus nec. Aliquam a aliquam dolor. Morbi diam turpis, pretium quis tincidunt sed, fermentum sed est. In faucibus dapibus vehicula.</p>
						<div class="scroll-button end" dir="top"></div>
					</div>
				</div>
			</div>
			<div class="face-right">
				<div class="flip-button top" dir="up"></div>
				<div class="flip-button bot" dir="down"></div>
				<div class="flip-button lft" dir="left"></div>
				<div class="flip-button rgt" dir="right"></div>
				<div class="flip-button hom" dir="home"></div>
				<div class="scroll-button top" dir="down"></div>
				<div class="scroll-button bot" dir="up"></div>
				<div class="pan-frame">
					<div class="panel">
						<h1>In massa velit</h1>
						<p>In massa velit, suscipit a turpis sed, placerat molestie mauris. Donec sit amet maximus ex. Praesent molestie lacus suscipit aliquet aliquet. Aliquam eget ipsum venenatis, interdum arcu sed, elementum justo. Vestibulum id erat in ipsum vulputate mollis at eu velit. Mauris aliquam purus quis ornare scelerisque. Morbi vitae efficitur orci. Donec mattis venenatis pellentesque.</p>
						<div class="scroll-button end" dir="top"></div>
					</div>
				</div>
			</div>
			<div class="face-top">
				<div class="flip-button top" dir="up"></div>
				<div class="flip-button bot" dir="down"></div>
				<div class="flip-button lft" dir="left"></div>
				<div class="flip-button rgt" dir="right"></div>
				<div class="flip-button hom" dir="home"></div>
				<div class="scroll-button top" dir="down"></div>
				<div class="scroll-button bot" dir="up"></div>
				<div class="pan-frame">
					<div class="panel">
						<h1>Aenean auctor enim</h1>
						<p>Aenean auctor enim eu nulla dictum, non egestas libero pulvinar. Morbi sit amet lobortis turpis, vitae molestie augue. Integer quam eros, egestas non dictum at, rhoncus ac augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec molestie arcu efficitur nibh accumsan semper. Proin id elit velit. Phasellus a libero quis nunc malesuada gravida vel ultrices nisi. Morbi diam turpis, ornare a sapien sed, fringilla sollicitudin velit. Maecenas id nulla placerat, elementum nibh non, accumsan tellus. Aliquam erat volutpat. Etiam vitae ultricies ante. Aliquam erat volutpat. Pellentesque et sodales diam. In hac habitasse platea dictumst. Praesent ornare nisi volutpat mauris varius, non gravida lectus suscipit. Etiam quis felis eget dolor elementum rutrum.</p>
						<div class="scroll-button end" dir="top"></div>
					</div>
				</div>
			</div>
			<div class="face-bottom">
				<div class="flip-button top" dir="up"></div>
				<div class="flip-button bot" dir="down"></div>
				<div class="flip-button lft" dir="left"></div>
				<div class="flip-button rgt" dir="right"></div>
				<div class="flip-button hom" dir="home"></div>
				<div class="scroll-button top" dir="down"></div>
				<div class="scroll-button bot" dir="up"></div>
				<div class="pan-frame">
					<div class="panel">
						<h1>Cras id quam diam</h1>
						<p>Cras id quam diam. Sed pulvinar in lectus feugiat porta. Integer fringilla ut sem nec aliquet. Aenean pharetra, sem quis maximus tristique, orci urna faucibus mi, et cursus leo magna in neque. Pellentesque cursus, magna id iaculis dictum, magna sapien bibendum dui, vel dignissim lorem nisl quis mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam dictum, felis eget porttitor pellentesque, nisi lacus tristique ante, rutrum gravida ligula tellus vitae tellus. Suspendisse at posuere mi. Cras feugiat libero non dui rhoncus, eget imperdiet sapien blandit. Duis facilisis eros quis nisl placerat, pulvinar maximus ante molestie.</p>
						<div class="scroll-button end" dir="top"></div>
					</div>
				</div>
			</div>
			<div class="face-back">
				<div class="flip-button top" dir="up"></div>
				<div class="flip-button bot" dir="down"></div>
				<div class="flip-button lft" dir="left"></div>
				<div class="flip-button rgt" dir="right"></div>
				<div class="flip-button hom" dir="home"></div>
				<div class="scroll-button top" dir="down"></div>
				<div class="scroll-button bot" dir="up"></div>
				<div class="pan-frame">
					<div class="panel">
						<h1>Nullam vel</h1>
						<p>
							Nullam vel consectetur mi. Quisque laoreet pellentesque mollis. Maecenas non porttitor neque, nec gravida tortor. In ac eros venenatis, bibendum felis nec, fermentum ligula. In dictum, dui vel tempor lacinia, augue eros feugiat nunc, quis pretium augue arcu id dolor. Fusce ac volutpat turpis, sit amet mattis nisl. Etiam semper tellus quis euismod elementum. Donec feugiat erat velit, id sollicitudin dui scelerisque eu. Donec iaculis ultrices mi, in auctor mauris efficitur id. Mauris lectus nulla, porta non varius vel, condimentum at est. Suspendisse vulputate fermentum sem a hendrerit. Vivamus iaculis dolor ac urna volutpat, nec rhoncus magna commodo.
						</p>
						<h2>Nunc suscipit lectus</h2>
						<p>Nunc suscipit lectus faucibus, lobortis ex non, consequat libero. Curabitur ac urna et augue imperdiet condimentum. Vivamus vitae nunc eu neque egestas tempor. Aliquam mollis, ex quis sodales maximus, turpis est aliquam lectus, ut porta erat massa eget ipsum. Quisque dapibus arcu odio, id vehicula urna varius ac. Curabitur bibendum in eros vitae iaculis. In egestas mauris sed sagittis condimentum. Etiam a purus id nisl luctus congue. Ut at varius odio, ut feugiat tortor. In rutrum tincidunt erat, cursus interdum elit accumsan in. Aliquam eu felis malesuada, facilisis nibh ut, rutrum ipsum. Aenean auctor, erat eget tempor malesuada, turpis mi sodales mauris, a auctor lorem eros quis ipsum. Integer eu sapien in neque malesuada sagittis nec sit amet ligula. Sed eleifend orci eu gravida dignissim.</p>
						<h3>Sed turpis purus</h3>
						<p>Sed turpis purus, interdum sed lacinia eu, euismod id justo. Donec accumsan, est ac euismod luctus, quam neque vehicula metus, sed gravida lectus nulla nec nisl. Fusce in dapibus ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac ante non risus facilisis gravida in imperdiet enim. Pellentesque tempor, dui vel aliquet posuere, lectus erat facilisis mauris, non congue nisl ipsum vitae sem. Phasellus quis orci at dolor ullamcorper volutpat.</p>
						<p>Integer fringilla nec arcu a porta. Morbi lacinia, ipsum vel iaculis pharetra, massa risus blandit orci, quis euismod orci nulla vel odio. Aenean dignissim magna in libero consequat, vitae rutrum mauris tempor. Aenean quis tortor sed urna lacinia interdum. Maecenas tempus elit at orci laoreet, quis suscipit eros pulvinar. Vivamus dictum nulla a convallis dapibus. Curabitur a condimentum turpis, eget venenatis magna. Praesent molestie mattis pellentesque. Curabitur consectetur scelerisque est, ac ultrices justo auctor in.</p>
						<p>Ut vitae hendrerit neque. Proin id turpis ultrices, congue lacus sit amet, scelerisque augue. Phasellus dictum arcu at orci lacinia ultrices. Nullam lacinia, nulla sit amet aliquet volutpat, odio sem laoreet nisi, at accumsan enim leo nec odio. Aliquam ultrices a neque imperdiet blandit. Proin viverra maximus placerat. Morbi congue efficitur libero at sagittis. Mauris venenatis lorem ut libero efficitur, at finibus ante sagittis.</p>
						<div class="scroll-button end" dir="top"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
            
          
!
            
              * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	cursor: default;
}

::selection {
	color: hsla(222, 50%, 90%, 1);
}

body {
	background: hsl(222, 0%, 10%);
	owerflow: hidden;
}

body,
p,
input,
selct,
textarea {
	font-family: 'Questrial', sans-serif;
}

body,
p {
	line-height: 1.75em;
}

h1,
h2,
h3,
h4,
p {
	margin: 0 0 1em 0;
	line-height: 1.5em;
}

h1 {
	font-size: 160%;
}

h2 {
	font-size: 140%;
}

h3 {
	font-size: 120%;
}

h4 {
	font-size: 100%;
}

#nav {
	position: absolute;
	z-index: 99;
	overflow: hidden;
	transition: 1s cubic-bezier(0.5, 0, 0.5, 1);
}

.port-frame {
	position: absolute;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.cube-frame {
	/*[size the cube-frame and cube-rotor]*/
	position: absolute;
	width: 70vmin;
	height: 70vmin;
	perspective: 120vmin;
	transition: 1s cubic-bezier(0.5, 0, 0.5, 1);
}

.cube-rotor {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: 1s cubic-bezier(0.5, -0.5, 0.5, 1.5);
	transform-style: preserve-3d;
}

.face-back,
.face-front,
.face-left,
.face-right,
.face-top,
.face-bottom {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: hsla(222, 0%, 10%, 1);
	/*/backface-visibility: hidden;/**/
	border: .25vmin solid hsla(222, 20%, 40%, 1);
	overflow: hidden;
	transition: .5s cubic-bezier(0.5, -0.5, 0.5, 1.5);
}

.cube-frame:hover div[class^=face] {
	/*/background: hsla(222, 0%, 10%, .95);/**/
}

@media all and (orientation: portrait) {
	.face-front {
		transform: translateZ(35vw);
	}
	.face-back {
		transform: translateZ(-35vw) rotateY(180deg);
	}
	.face-left {
		transform: translateX(-35vw) rotateY(-90deg);
	}
	.face-right {
		transform: translateX(35vw) rotateY(90deg);
	}
	.face-top {
		transform: translateY(-35vw) rotateX(90deg);
	}
	.face-bottom {
		transform: translateY(35vw) rotateX(-90deg);
	}
}

@media all and (orientation: landscape) {
	.face-front {
		transform: translateZ(35vh);
	}
	.face-back {
		transform: translateZ(-35vh) rotateY(180deg);
	}
	.face-left {
		transform: translateX(-35vh) rotateY(-90deg);
	}
	.face-right {
		transform: translateX(35vh) rotateY(90deg);
	}
	.face-top {
		transform: translateY(-35vh) rotateX(90deg);
	}
	.face-bottom {
		transform: translateY(35vh) rotateX(-90deg);
	}
}


/*[while turning]*/

.cube-rotor.turning [class^=face] {
	background: hsla(222, 20%, 40%, .25);
	border: .25vmin solid hsla(222, 20%, 40%, 0);
}

@media all and (orientation: portrait) {
	.cube-rotor.turning .face-front {
		transform: translateZ(40vw);
	}
	.cube-rotor.turning .face-back {
		transform: translateZ(-40vw) rotateY(180deg);
	}
	.cube-rotor.turning .face-left {
		transform: translateX(-40vw) rotateY(-90deg);
	}
	.cube-rotor.turning .face-right {
		transform: translateX(40vw) rotateY(90deg);
	}
	.cube-rotor.turning .face-top {
		transform: translateY(-40vw) rotateX(90deg);
	}
	.cube-rotor.turning .face-bottom {
		transform: translateY(40vw) rotateX(-90deg);
	}
	/*[back face correction]*/
	.cube-rotor.turnX .face-back,
	.cube-rotor.turnX.turning .face-back {
		transform: translateZ(-35vw) rotateY(180deg) rotateZ(180deg);
	}
}

@media all and (orientation: landscape) {
	.cube-rotor.turning .face-front {
		transform: translateZ(40vh);
	}
	.cube-rotor.turning .face-back {
		transform: translateZ(-40vh) rotateY(180deg);
	}
	.cube-rotor.turning .face-left {
		transform: translateX(-40vh) rotateY(-90deg);
	}
	.cube-rotor.turning .face-right {
		transform: translateX(40vh) rotateY(90deg);
	}
	.cube-rotor.turning .face-top {
		transform: translateY(-40vh) rotateX(90deg);
	}
	.cube-rotor.turning .face-bottom {
		transform: translateY(40vh) rotateX(-90deg);
	}
	/*[back face correction]*/
	.cube-rotor.turnX .face-back,
	.cube-rotor.turnX.turning .face-back {
		transform: translateZ(-35vh) rotateY(180deg) rotateZ(180deg);
	}
}


/*[markers]/

.face-front::before {
	content: 'front';
}

.face-back::before {
	content: 'back';
}

.face-left::before {
	content: 'left';
}

.face-right::before {
	content: 'right';
}

.face-top::before {
	content: 'top';
}

.face-bottom::before {
	content: 'bottom';
}

.face-front::before,
.face-back::before,
.face-left::before,
.face-right::before,
.face-top::before,
.face-bottom::before {
	position: absolute;
	top: .25em;
	left: .25em;
	color: hsla(222, 0%, 30%, 1);
}


/**/

.pan-frame {
	position: absolute;
	z-index: 1;
	width: 75%;
	height: 75%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	/*/border: 1px solid hsla(222, 20%, 40%, 1);/**/
	overflow: hidden;
}


/*[panels]*****************************/

.cube-frame .panel {
	/*[cemter]*/
	position: relative;
	z-index: 1;
	/**/
	min-height: 55vmin;
	/**/
	padding-bottom: 1em;
	/*[must match the size of the box]*/
	color: hsla(222, 20%, 60%, 1);
	transition: 1s cubic-bezier(0.5, 0, 0.5, 1);
	/*/background: hsla(222, 0%, 0%, .25);/**/
	border-bottom: .25vmin solid hsla(222, 20%, 40%, 1);
	/**/
	transform: translateY(5vmin);
	/**/
}

.cube-frame .panel::after {
	content: 'back to top';
	position: absolute;
	font-size: 80%;
	bottom: -2em;
	width: 100%;
	text-align: center;
}


/*[controls]**************************/

.flip-button {
	position: absolute;
	z-index: 10;
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	border-color: transparent;
	transition: .25s cubic-bezier(0.5, 0, 0.5, 1);
	cursor: pointer;
}

.flip-button.hom {
	border-style: double;
	border-radius: 50%;
}

.scroll-button {
	position: absolute;
	z-index: 2;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	transition: .25s cubic-bezier(0.5, 0, 0.5, 1);
	cursor: pointer;
}

.scroll-button.top::after,
.scroll-button.bot::after {
	content: '';
	position: absolute;
}


/*[info]*/

body::before,
body::after {
	/*/display: none;/**/
	font: bold 11px Verdana;
	color: hsl(0, 0%, 50%);
	background: hsla(0, 0%, 10%, 0.75);
	padding: .25rem .65rem .35rem .65rem;
	border-radius: .25rem;
	position: fixed;
	z-index: 999;
	bottom: .5rem;
}

body::before {
	left: .5rem;
}

body::after {
	right: .5rem;
}


/*[layout: cube position]**************/

@media all and (orientation: portrait) {
	body::after {
		/**/
		content: 'portrait';
		/**/
	}
	.cube-frame {
		/*[top-align the cube-frame]*/
		top: 15vmin;
		left: 50%;
		transform: translateX(-50%) translateY(0%);
	}
}

@media all and (orientation: landscape) {
	body::after {
		/**/
		content: 'landscape';
		/**/
	}
	.cube-frame {
		/*[center-align the cube-frame]*/
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
}


/*[breakpoints: Foundation media quieries]*/

@media only screen {
	body::before {
		content: 'mobile';
	}
	body {
		font-size: 4vmin;
	}
	/*[controls looks]*/
	.flip-button.hom {
		border-color: hsl(222, 20%, 40%);
	}
	.flip-button.top {
		border-bottom-color: hsl(222, 20%, 25%);
	}
	.flip-button.bot {
		border-top-color: hsl(222, 20%, 25%);
	}
	.flip-button.lft {
		border-right-color: hsl(222, 20%, 25%);
	}
	.flip-button.rgt {
		border-left-color: hsl(222, 20%, 25%);
	}
	.scroll-button.top {
		border-bottom-color: hsl(222, 20%, 25%);
	}
	.scroll-button.bot {
		border-top-color: hsl(222, 20%, 25%);
	}
	.scroll-button.top::after {
		background: hsl(222, 20%, 25%);
	}
	.scroll-button.bot::after {
		background: hsl(222, 20%, 25%);
	}
	.scroll-button.end {
		border-bottom-color: hsl(222, 20%, 25%);
	}
	/*[controls size & position]*/
	.flip-button {
		border-width: 2vmin;
	}
	.flip-button.hom {
		border-width: 4vmin;
		top: 1vmin;
		left: 1vmin;
		right: auto;
		bottom: auto;
	}
	.flip-button.top {
		top: -1.5vmin;
		left: 0;
		right: 0;
		bottom: auto;
	}
	.flip-button.bot {
		top: auto;
		left: 0;
		right: 0;
		bottom: -1.5vmin;
	}
	.flip-button.lft {
		top: 0;
		left: -1.5vmin;
		right: auto;
		bottom: 0;
	}
	.flip-button.rgt {
		top: 0;
		left: auto;
		right: -1.5vmin;
		bottom: 0;
	}
	.scroll-button {
		border-width: 2vmin;
	}
	.scroll-button.top {
		top: -1.5vmin;
		right: .5vmin;
	}
	.scroll-button.bot {
		bottom: -1.5vmin;
		right: .5vmin;
	}
	.scroll-button.end {
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.scroll-button.top::after,
	.scroll-button.bot::after {
		width: 2vmin;
		height: .75vmin;
	}
	.scroll-button.top::after {
		bottom: -2.5vmin;
		left: -1vmin;
	}
	.scroll-button.bot::after {
		top: -2.5vmin;
		left: -1vmin;
	}
}

@media only screen and (max-width: 40em) {
	/*[max-width 640px, mobile-only styles]*/
}

@media only screen and (min-width: 40.063em) {
	/*[min-width 641px, tablets screens]*/
	body::before {
		content: 'tablet';
	}
	body {
		font-size: 3vmin;
	}
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
	/*[min-width 641px and max-width 1024px, tablet-only styles]*/
}

@media only screen and (min-width: 64.063em) {
	/*[min-width 1025px, large screens]*/
	body::before {
		content: 'large';
	}
	body {
		font-size: 2vmin;
	}
	/*[controls looks]*/
	.flip-button.hom {
		border-color: hsl(222, 20%, 40%);
	}
	.flip-button.top {
		border-bottom-color: hsl(222, 20%, 40%);
	}
	.flip-button.bot {
		border-top-color: hsl(222, 20%, 40%);
	}
	.flip-button.lft {
		border-right-color: hsl(222, 20%, 40%);
	}
	.flip-button.rgt {
		border-left-color: hsl(222, 20%, 40%);
	}
	.flip-button.hom:hover {
		border-color: hsl(222, 50%, 70%);
	}
	.flip-button.top:hover {
		border-bottom-color: hsl(222, 50%, 70%);
	}
	.flip-button.bot:hover {
		border-top-color: hsl(222, 50%, 70%);
	}
	.flip-button.lft:hover {
		border-right-color: hsl(222, 50%, 70%);
	}
	.flip-button.rgt:hover {
		border-left-color: hsl(222, 50%, 70%);
	}
	.scroll-button.top {
		border-bottom-color: hsl(222, 20%, 40%);
	}
	.scroll-button.bot {
		border-top-color: hsl(222, 20%, 40%);
	}
	.scroll-button.top::after {
		background: hsl(222, 20%, 40%);
	}
	.scroll-button.bot::after {
		background: hsl(222, 20%, 40%);
	}
	.scroll-button.end {
		border-bottom-color: hsl(222, 20%, 40%);
	}
	.scroll-button.top:hover {
		border-bottom-color: hsl(222, 50%, 70%);
	}
	.scroll-button.bot:hover {
		border-top-color: hsl(222, 50%, 70%);
	}
	.scroll-button.end:hover {
		border-bottom-color: hsl(222, 50%, 70%);
	}
	.scroll-button:hover::after {
		background: hsl(222, 50%, 70%);
	}
	/*[controls size & position]*/
	.flip-button.hom {
		border-width: 2vmin;
		top: .5vmin;
		left: .5vmin;
		right: auto;
		bottom: auto;
	}
	/*[other elements]*/
	.pan-frame {
		width: 85%;
		height: 85%;
	}
}

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
	/*[min-width 1025px and max-width 1440px, large screen-only styles]*/
}

@media only screen and (min-width: 90.063em) {
	/*[min-width 1441px, x-large screens]*/
	body::before {
		content: 'x-large';
	}
}

@media only screen and (min-width: 90.063em) and (max-width: 120em) {
	/*[min-width 1441px and max-width 1920px, x-large screen-only styles]*/
}

@media only screen and (min-width: 120.063em) {
	/*[min-width 1921px, xx-large screens]*/
	body::before {
		content: 'xx-large';
	}
}


/*[end media quieries]*****************/


/*[animations]*****/

.spin.up .cube-rotor {
	animation: spinXBtoT 15s infinite linear;
}

.spin.down .cube-rotor {
	animation: spinXTtoB 15s infinite linear;
}

.spin.left .cube-rotor {
	animation: spinYRtoL 15s infinite linear;
}

.spin.right .cube-rotor {
	animation: spinYLtoR 15s infinite linear;
}

@keyframes spinXTtoB {
	from {
		transform: rotateX(-90deg);
	}
	to {
		transform: rotateX(-450deg);
	}
}

@keyframes spinXBtoT {
	from {
		transform: rotateX(90deg);
	}
	to {
		transform: rotateX(450deg);
	}
}

@keyframes spinYLtoR {
	from {
		transform: rotateY(90deg);
	}
	to {
		transform: rotateY(450deg);
	}
}

@keyframes spinYRtoL {
	from {
		transform: rotateY(-90deg);
	}
	to {
		transform: rotateY(-450deg);
	}
}

@keyframes spinZ {
	from {
		transform: rotateZ(0deg);
	}
	to {
		transform: rotateZ(360deg);
	}
}

@keyframes spinXYZ {
	from {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	to {
		transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
}
            
          
!
            
              (function() {
	"use strict";
	var flip_buttons = document.querySelectorAll('.flip-button'),
		cube = document.querySelector('.cube-rotor'),
		angle = 90,
		flipdir;

	cube.style.transform = 'rotateX(0deg) rotateY(0deg)';

	function _flipXY() {
		var trans = cube.style.transform,
			degX, degY;
		if (this !== undefined && this.getAttribute('dir') !== null) {
			flipdir = this.getAttribute('dir'); /*[buttons]*/
		} else { /*[touch]*/
			flipdir = flipdir;
		}
		var rX = /-?\d+/g;
		degX = parseInt(trans.match(rX)[0]);
		degY = parseInt(trans.match(rX)[1]);
		if (flipdir === 'home') {
			degX = 0;
			degY = 0;
			cube.classList.remove('turnX');
		} else if (flipdir === 'left') {
			degX = 0;
			degY = degY - angle;
			cube.classList.remove('turnX');
		} else if (flipdir === 'right') {
			degX = 0;
			degY = degY + angle;
			cube.classList.remove('turnX');
		} else if (flipdir === 'down') {
			degY = 0;
			degX = degX - angle;
			cube.classList.add('turnX');
		} else if (flipdir === 'up') {
			degY = 0;
			degX = degX + angle;
			cube.classList.add('turnX');
		}
		if (Math.abs(degX) === angle * 4) {
			degX = 0;
		}
		if (Math.abs(degY) === angle * 4) {
			degY = 0;
		}
		cube.style.transform = 'rotateX(' + degX + 'deg) rotateY(' + degY + 'deg)';
		cube.classList.add('turning');
		setTimeout(function() {
			cube.classList.remove('turning');
		}, 1000);
	}

	for (var f = 0; f < flip_buttons.length; f++) {
		flip_buttons[f].addEventListener('click', _flipXY, false);
	}

	/*[panel scrolls]*/
	var step = 45,
		scrolldir;

	function _scrollY(face) {
		var slength, panel;
		if (this !== undefined && this.getAttribute('dir') !== null) {
			scrolldir = this.getAttribute('dir'); /*[buttons]*/
			if (this.parentNode.classList.contains('panel')) {
				panel = this.parentNode;
			} else {
				panel = this.parentNode.querySelector('.panel');
			}
		} else if (this !== undefined && this.className === 'pan-frame') { /*[mousewheel]*/
			panel = this.querySelector('.panel');
		} else if (face !== undefined) { /*[touch]*/
			panel = face.querySelector('.panel');
		} else {
			return;
		}
		slength = parseInt(panel.style.transform.replace('translateY(', ''));
		if (scrolldir === 'up') {
			slength = slength - step;
		} else if (scrolldir === 'down' && slength < 0) {
			slength = slength + step;
		} else if (scrolldir === 'top') {
			slength = 0;
		}
		setTimeout(function() {
			panel.style.transform = 'translateY(' + slength + 'vmin)';
		}, 100);
	}

	/*[swipe detection]*/
	function _swipe(obj) {
		var touch = obj,
			swipedir,
			sX,
			sY,
			dX,
			dY,
			threshold = 100,
			/*[min distance traveled to be considered swipe]*/
			slack = 50,
			/*[max distance allowed at the same time in perpendicular direction]*/
			alT = 500,
			/*[max time allowed to travel that distance]*/
			elT, /*[elapsed time]*/
			stT; /*[start time]*/

		touch.addEventListener('touchstart', function(e) {
			var touchobj = e.changedTouches[0];
			swipedir = 'none';
			sX = touchobj.pageX;
			sY = touchobj.pageY;
			stT = new Date().getTime();
			//e.preventDefault();
		}, false);

		touch.addEventListener('touchmove', function(e) {
			e.preventDefault(); /*[prevent scrolling when inside DIV]*/
		}, false);

		touch.addEventListener('touchend', function(e) {
			var touchobj = e.changedTouches[0];
			dX = touchobj.pageX - sX;
			dY = touchobj.pageY - sY;
			elT = new Date().getTime() - stT;
			if (elT <= alT) {
				if (Math.abs(dX) >= threshold && Math.abs(dY) <= slack) {
					swipedir = (dX < 0) ? 'left' : 'right';
				} else if (Math.abs(dY) >= threshold && Math.abs(dX) <= slack) {
					swipedir = (dY < 0) ? 'up' : 'down';
				}
				flipdir = swipedir;
				if (touch.className === 'pan-frame') {
					if (swipedir === 'up') {
						scrolldir = swipedir;
						_scrollY(touch);
						e.stopPropagation();
					} else if (swipedir === 'down') {
						if (touch.querySelector('.panel').style.transform !== 'translateY(0vmin)') {
							scrolldir = swipedir;
							_scrollY(touch);
						} else {
							if (flipdir !== 'none') {
								_flipXY();
							}
						}
						e.stopPropagation();
					}
				} else if (touch.className.indexOf('face') !== -1) {
					if (flipdir !== 'none') {
						_flipXY();
					}
				}
			}
		}, false);
	}
	/*[assignments]*/
	var scroll_buttons = document.querySelectorAll('.scroll-button');

	for (var s = 0; s < scroll_buttons.length; s++) {
		scroll_buttons[s].addEventListener('click', _scrollY, false);
	}
	cube.addEventListener('mouseover', function() {
		this.style.animationPlayState = 'paused';
	}, false);
	cube.addEventListener('mouseout', function() {
		this.style.animationPlayState = 'running';
	}, false);
	var panels = document.querySelectorAll('.panel');
	for (var p = 0; p < panels.length; p++) {
		panels[p].style.transform = 'translateY(0vmin)';
	}
	var faces = document.querySelectorAll('[class^=face]');
	for (var fc = 0; fc < faces.length; fc++) {
		_swipe(faces[fc]);
	}
	var frames = document.querySelectorAll('.pan-frame');
	for (var fr = 0; fr < frames.length; fr++) {
		frames[fr].addEventListener('wheel', function(e) {
			if (e.deltaY < 0) {
				scrolldir = 'down';
			}
			if (e.deltaY > 0) {
				scrolldir = 'up';
			}
		});
		frames[fr].addEventListener('wheel', _scrollY);
		_swipe(frames[fr]);
	}
})();
/*[end]*/
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console