Skip to content

Instantly share code, notes, and snippets.

@alvaropinot

alvaropinot/NeatNait-css3-3D-transitions-menu.markdown

Created February 22, 2014 13:09
Show Gist options
  • Save alvaropinot/9154590 to your computer and use it in GitHub Desktop.
Save alvaropinot/9154590 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by NeatNait.
Raw
index.html
<h1>example</h1>
<ul class="full height reverse">
<li>
<span data-title="who we are">who we are</span>
</li>
<li>
<a href="#"><span data-title="what we do">what we do</span></a>
</li>
<li>
<a href="#"><span data-title="share the love">share the love</span></a>
</li>
<li>
<a href="#"><span data-title="about us">about us</span></a>
</li>
<li>
<a href="#"><span data-title="want to contactus?">want to contactus?</span></a>
</li>
</ul>
<h1>variations</h1>
<ul>
<li>
<span data-title="no link">no link</span>
</li>
<li>
<a href="#"><span data-title="with Link">with Link</span></a>
</li>
</ul>
<ul class="no-background">
<li>
<span data-title="no link">no link</span>
</li>
<li>
<a href="#"><span data-title="with Link">with Link</span></a>
</li>
</ul>
<ul class="rotate middle half height">
<li>
<span data-title="no link">no link</span>
</li>
<li>
<a href="#"><span data-title="with Link">with Link</span></a>
</li>
</ul>
<ul class="rotate middle full height">
<li>
<span data-title="no link">no link</span>
</li>
<li>
<a href="#"><span data-title="with Link">with Link</span></a>
</li>
</ul>
<ul class="rotate bottom half height">
<li>
<span data-title="no link">no link</span>
</li>
<li>
<a href="#"><span data-title="with Link">with Link</span></a>
</li>
</ul>
<ul class="rotate bottom full height">
<li>
<span data-title="no link">no link</span>
</li>
<li>
<a href="#"><span data-title="with Link">with Link</span></a>
</li>
</ul>
<ul class="rotate bottom disappear">
<li>
<span data-title="no link">no link</span>
</li>
<li>
<a href="#"><span data-title="with Link">with Link</span></a>
</li>
</ul>
<ul class="full height reverse">
<li>
<span data-title="no link">no link</span>
</li>
<li>
<a href="#"><span data-title="with Link">with Link</span></a>
</li>
</ul>
<h2>made with love at <a href="http://www.neatnait.com/">neatnait</a></h2>
Raw
NeatNait-css3-3D-transitions-menu.markdown
Raw
script.js
body{
text-align:center;
}
h1{
text-align:left;
padding:0 2em;
color:#f06;
}
h2 a{
color:#ff0066;
}
a{
color:white;
text-decoration:none;
}
ul{
list-style:none;
display:inline-block;
}
li{
font-weight:bold;
margin:0;
padding:0;
float:left;
padding:0px;
background:#333;
color: white;
display: inline-block;
overflow: hidden;
vertical-align: top;
perspective: 600px;
perspective-origin: 50% 50%;
}
/*
li span variations
*/
li span{
display: block;
position: relative;
padding:20px;
transition: all 400ms ease;
transform-origin: 50% 0%;
transform-style: preserve-3d;
}
.rotate.middle li span, .reverse li span{
transform-origin: 0% 50%;
}
.rotate.bottom li span{
transform-origin: 0% 100%;
}
/*
li:hover span variations
*/
li:hover span, .rotate.middle li:hover span {
background: #ddd;
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.reverse li:hover span {
transform: translate3d( 0px, 0px, -30px ) rotateX( -90deg );
}
/*
li span:after variations
*/
li span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 20px;
color: #f06;
background: #444;
transform-origin: 50% 0%;
transform: translate3d( 0px, 61px, 0px ) rotateX( -90deg );
}
.half.height li span:after {
padding:5px 20px;
}
.full.height li span:after {
padding: 20px 20px;
}
.rotate.bottom li span:after {
transform-origin: 0% 100%;
}
.rotate.bottom.disappear li span:after{
transform-origin: 0% 0%;
}
.rotate.middle.full.height li span:after{
transform-origin: 100% 50%;
}
.reverse li span:after {
transform-origin: 100% 50%;
transform: translate3d( 0px, 61px, 0px ) rotateX( 90deg );
}
.no-background li, .no-background a{
background:none;
color:#ff0066;
}
Raw
style.css
body{
text-align:center;
font-family:sans-serif;
}
h1{
text-align:left;
padding:0 2em;
color:#f06;
}
h2 a{
color:#ff0066;
}
a{
color:white;
text-decoration:none;
}
ul{
list-style:none;
display:inline-block;
}
li{
font-weight:bold;
margin:0;
padding:0;
float:left;
padding:0px;
background:#333;
color: white;
display: inline-block;
overflow: hidden;
vertical-align: top;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
/*
li span variations
*/
li span{
display: block;
position: relative;
padding:20px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.rotate.middle li span, .reverse li span{
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.rotate.bottom li span{
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
/*
li:hover span variations
*/
li:hover span, .rotate.middle li:hover span {
background: #ddd;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-o-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.reverse li:hover span {
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( -90deg );
-ms-transform: translate3d( 0px, 0px, -30px ) rotateX( -90deg );
-o-transform: translate3d( 0px, 0px, -30px ) rotateX( -90deg );
transform: translate3d( 0px, 0px, -30px ) rotateX( -90deg );
}
/*
li span:after variations
*/
li span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 20px;
color: #f06;
background: #444;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 61px, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 61px, 0px ) rotateX( -90deg );
-ms-transform: translate3d( 0px, 61px, 0px ) rotateX( -90deg );
-o-transform: translate3d( 0px, 61px, 0px ) rotateX( -90deg );
transform: translate3d( 0px, 61px, 0px ) rotateX( -90deg );
}
.half.height li span:after {
padding:5px 20px;
}
.full.height li span:after {
padding: 20px 20px;
}
.rotate.bottom li span:after {
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.rotate.bottom.disappear li span:after{
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.rotate.middle.full.height li span:after{
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.reverse li span:after {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: translate3d( 0px, 61px, 0px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 61px, 0px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 61px, 0px ) rotateX( 90deg );
-o-transform: translate3d( 0px, 61px, 0px ) rotateX( 90deg );
transform: translate3d( 0px, 61px, 0px ) rotateX( 90deg );
}
.no-background li, .no-background a{
background:none;
color:#ff0066;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment