<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Zaku/pen/kriyt?limit=all&page=67&q=css" />
<style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
@import url('https://fonts.googleapis.com/css?family=Handlee');
html,
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
font-family: 'Open Sans Condensed', sans-serif;
color: rgba(252, 251, 250, 0.9);
}
.menu {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
transition: background-color 0.3s linear;
}
.menu .menu-content {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-ms-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
-moz-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
-ms-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
-o-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
transform: translate3d(0px, 0px, 0px) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
float: left;
width: 6em;
overflow: hidden;
white-space: nowrap;
}
.menu .menu-content h2 {
font-family: 'Handlee', cursive;
font-size: 1em;
font-weight: normal;
margin-left: 1em;
}
.menu .menu-content ul {
list-style: none;
}
.menu .menu-content-1 {
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.menu .menu-content-2 {
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.menu .menu-content-2 > ul {
left: -6em;
position: relative;
}
.menu .menu-content-2 > h2 {
left: -6em;
position: relative;
}
.menu .menu-content-3 {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
background-color: black;
position: absolute;
left: 0;
width: 12em;
}
.menu li,
.menu label {
color: rgba(252, 251, 250, 0.5);
cursor: pointer;
-webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s;
-ms-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
transition-duration: 1.0s;
}
.menu li:hover,
.menu label:hover {
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
color: rgba(252, 251, 250, 0.9);
}
.menu .menu-switch {
position: absolute;
margin-left: 12em;
padding-top: 6em;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.menu .menu-switch label {
font-size: 3em;
font-family: 'Open Sans Condensed', sans-serif;
}
.menu input {
display: none;
}
.menu #menu-collapsed:checked ~ .menu-content-1 {
-webkit-transform: translate3d(-6em, 0, 0) rotateY(120deg);
-moz-transform: translate3d(-6em, 0, 0) rotateY(120deg);
-ms-transform: translate3d(-6em, 0, 0) rotateY(120deg);
-o-transform: translate3d(-6em, 0, 0) rotateY(120deg);
transform: translate3d(-6em, 0, 0) rotateY(120deg);
}
.menu #menu-collapsed:checked ~ .menu-content-2 {
-webkit-transform: translate3d(-6em, 0em, 0em) rotateY(-60deg);
-moz-transform: translate3d(-6em, 0em, 0em) rotateY(-60deg);
-ms-transform: translate3d(-6em, 0em, 0em) rotateY(-60deg);
-o-transform: translate3d(-6em, 0em, 0em) rotateY(-60deg);
transform: translate3d(-6em, 0em, 0em) rotateY(-60deg);
background-color: rgba(128, 128, 128, 0.25);
}
.menu #menu-collapsed:checked ~ .menu-content-3 {
opacity: 0.0;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.menu #menu-collapsed:checked ~ .menu-switch {
margin-left: 0em;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-ms-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
.menu #menu-collapsed:checked ~ .menu-switch .rise {
display: block;
}
.menu #menu-collapsed:checked ~ .menu-switch .collapse {
display: none;
}
.menu #menu-collapsed ~ .menu-switch .rise {
display: none;
}
</style></head><body>
<div class="menu">
<input type="checkbox" id="menu-collapsed" name="menu-collapsed" checked="checked" />
<div class="menu-content menu-content-1">
<h2>CSS only 3D fold menu</h2>
<ul>
<li>lorem ipsum</li>
<li>dolor sit amet</li>
<li>consetetur sadipscing</li>
<li>elitr</li>
<li>sed diam nonumy</li>
<li>eirmod tempor</li>
<li>invidunt ut</li>
<li>labore et dolore</li>
</ul>
</div>
<div class="menu-switch">
<label class="collapse" for="menu-collapsed">«</label>
<label class="rise" for="menu-collapsed">»</label>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js'></script>
<script >$('.menu-content').clone().wrap('div').attr('class', 'menu-content menu-content-2').insertBefore('.menu-switch')
.clone().wrap('div').attr('class', 'menu-content menu-content-3').insertBefore('.menu-switch');
setTimeout(function(){
$('#menu-collapsed').attr('checked', false);
},1000);
bgcolor = [0, 0, 0];
color = [235, 235, 235];
var gui = new dat.GUI();
gui.addColor(window, 'bgcolor').onChange(function(){
bgcolor = [~~bgcolor[0], ~~bgcolor[1], ~~bgcolor[2]];
$('html, body, .menu-content-3').css('background-color','rgb(' + bgcolor.join(',') + ')');
});
gui.addColor(window, 'color').onChange(function(){
color = [~~color[0], ~~color[1], ~~color[2]];
$('h2').css('color','rgb(' + color.join(',') + ')');
$('.menu li, .menu label').css('color','rgba(' + color.join(',') + ', 0.5)');
});
//# sourceURL=pen.js
</script>
</body></html>
