I'm looking to achieve a vertical flip effect similar to this example: , but for horizontal items.
However, the following code snippet did not produce the desired effect:
.navbar li {
float: left;
margin-left: 20px;
list-style-type: none;
position: relative;
}
navbar a.link span.active,
.navbar a.link span.hover {
display: table;
position: absolute;
width: 100%;
height: 100%;
top: 0;
transform-origin: 0% 50% 0px;
-webkit-transform-origin: 0% 50% 0px;
transition: .2s;
-webkit-transition: .2s;
border-bottom: 1px solid #555;
}
.navbar a.link span.active {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
left: 0;
background-color: #444;
}
.navbar a.link:hover span.active {
background-color: #999;
transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, -50, 0, 0, 1);
-webkit-transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, -50, 0, 0, 1);
}
.navbar a.link span.active .vertical {
color: #aaa;
}
.navbar a.link span.hover {
transform: matrix3d(0, 0, -1, 0.00166, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
-webkit-transform: matrix3d(0, 0, -1, 0.00166, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
left: 91%;
background-color: #ccc;
}
.navbar a.link:hover span.hover {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00166, -50, 0, 0, 1);
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00166, -50, 0, 0, 1);
You can view and test the code on jsfiddle here: http://jsfiddle.net/Ff3qW/