Author: | jackfilose |
---|---|
Views Total: | 15,710 views |
Official Page: | Go to website |
Last Update: | July 15, 2014 |
License: | Unknown |
Preview:

Description:
A CSS3 transform and transition based image 3D hover flip effect that replicates the familiar ‘cover flow’ effect. Created by jackfilose.
How to use it:
Create an image showcase with a 3D cover flow effect using Html unordered list. Add class ‘highlighted’ to any item that will be highlighted on page loaded.
<ul id="menu"> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 2</a> </li> <li class="highlighted"> <a href="#">Item 3</a> </li> <li> <a href="#">Item 4</a> </li> <li> <a href="#">Item 5</a> </li> <li> <a href="#">Item 6</a> </li> </ul>
The core CSS to style and implement the 3D cover flow effect on list items.
ul#menu { padding: 0; margin: 0; -moz-perspective: 780px; -webkit-perspective: 780px; perspective: 780px; background-color: transparent; } ul#menu li a { display: block; width: 100%; height: 100%; } ul#menu li { text-indent: -9999px; position: relative; display: inline-block; width: 200px; height: 159px; margin-right: -70px; -moz-background-size: contain; -webkit-background-size: contain; background-size: contain; background-repeat: no-repeat; background-position: 0 0; z-index: 50; -moz-transform: rotateY(45deg); -webkit-transform: rotateY(45deg); transform: rotateY(45deg); -moz-transition: all .45s; -webkit-transition: all .45s; transition: all .45s; opacity: .8; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 30px rgba(0,0,0,0.2); } ul#menu li:last-child, ul#menu li:first-child { z-index: 45; } ul#menu li:nth-child(2), ul#menu li:nth-child(5) { z-index: 46; } ul#menu li:nth-child(3) { z-index: 51; } ul#menu li.highlighted { -moz-transform: rotateY(0deg) scale(1.2); -webkit-transform: rotateY(0deg) scale(1.2); transform: rotateY(0deg) scale(1.2); z-index: 55!important; } ul#menu .highlighted ~ li { -moz-transform: rotateY(-45deg); -webkit-transform: rotateY(-45deg); transform: rotateY(-45deg); } ul#menu li:hover, ul#menu li:first-child:hover, ul#menu li.highlighted ~ li:hover { z-index: 60!important; } ul#menu li:hover { -moz-transform: rotateY(0deg) scale(1.2); -webkit-transform: rotateY(0deg) scale(1.2); transform: rotateY(0deg) scale(1.2); opacity: 1; } ul#menu li:hover ~ li { -moz-transform: rotateY(-45deg); -webkit-transform: rotateY(-45deg); transform: rotateY(-45deg); } ul#menu:hover li:not(:hover) { -moz-transform: rotateY(45deg); -webkit-transform: rotateY(45deg); transform: rotateY(45deg); } ul#menu:hover li:hover ~ li { -moz-transform: rotateY(-45deg); -webkit-transform: rotateY(-45deg); transform: rotateY(-45deg); } ul#menu:not(:hover) li.highlighted { opacity: 1; } ul#menu li:after { content: ""; width: 200px; height: 20px; background: rgba(255,255,255,.5); position: absolute; bottom: -20px; left: 0; -webkit-mask-image: -webkit-gradient(linear, left 10%, left bottom, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0))); }
Add background images to the list items.
ul#menu li:nth-child(1) { background-image: url(1.jpg); } ul#menu li:nth-child(2) { background-image: url(2.jpg); } ul#menu li:nth-child(3) { background-image: url(3.jpg); } ul#menu li:nth-child(4) { background-image: url(4.jpg); } ul#menu li:nth-child(5) { background-image: url(5.jpg); } ul#menu li:nth-child(6) { background-image: url(6.jpg); }
That’s it. Tweak and modify the CSS as you like to create your own styles.