HTML5, CSS3 & JS Experiments

By Martin Ivanov

3D CD Cases on a Shelf

Demo

A real-life implementation of this solution, using LastFm's REST API data is available on this page. Are you interested in HTML5 Web Components? Check AcidJs.XCDInfo - a similar experiment, wrapped as a custom tag, utilizing data from Last.Fm's REST API.

Semi-frontal

  • pages/css3-cd-cases-on-a-shelf/cd-covers/slayer-south-of-heaven.jpg
  • pages/css3-cd-cases-on-a-shelf/cd-covers/cannibal-corpse-butchered-at-birth.jpg
  • pages/css3-cd-cases-on-a-shelf/cd-covers/kreator-renewal.jpg
  • pages/css3-cd-cases-on-a-shelf/cd-covers/sepultura-arise.jpg
  • pages/css3-cd-cases-on-a-shelf/cd-covers/metallica-and-justice-for-all.jpg
  • pages/css3-cd-cases-on-a-shelf/cd-covers/sodom-tapping-the-vein.jpg

Frontal

  • pages/css3-cd-cases-on-a-shelf/cd-covers/slayer-south-of-heaven.jpg
  • pages/css3-cd-cases-on-a-shelf/cd-covers/kreator-renewal.jpg
  • pages/css3-cd-cases-on-a-shelf/cd-covers/sepultura-arise.jpg
  • pages/css3-cd-cases-on-a-shelf/cd-covers/metallica-and-justice-for-all.jpg
  • pages/css3-cd-cases-on-a-shelf/cd-covers/sodom-tapping-the-vein.jpg

Usage and Code Insight

            
<p>A real-life implementation of this solution, using LastFm's REST API data is available on   
    <a href="http://wemakesites.net/my-favorite-music.html" target="_blank">this page</a>. 
    Are you interested in <a href="html5-web-components.html" target="_blank">HTML5 Web Components</a>? 
    Check <a href="x-cd-info-html5-web-component.html" target="_blank">AcidJs.XCDInfo</a> - a 
    similar experiment, wrapped as a custom tag, utilizing data from 
    <a target="_blank" href="http://last.fm">Last.Fm</a>'s REST <a target="_blank" href="http://last.fm/api">API</a>.</p>
            
            <h2>Semi-frontal</h2>

            <div class="acidjs-cases-shelf acidjs-cases-tilted">
                <div>
                    <ul>
                        <li>
                            <figure>
                                <div>
                                    <img src="pages/css3-cd-cases-on-a-shelf/cd-covers/slayer-south-of-heaven.jpg" alt="pages/css3-cd-cases-on-a-shelf/cd-covers/slayer-south-of-heaven.jpg" />
                                </div>
                            </figure>
                        </li><!--
                        --><li>
                            <figure>
                                <div>
                                    <img src="pages/css3-cd-cases-on-a-shelf/cd-covers/cannibal-corpse-butchered-at-birth.jpg" alt="pages/css3-cd-cases-on-a-shelf/cd-covers/cannibal-corpse-butchered-at-birth.jpg" />
                                </div>
                            </figure>
                        </li><!--
                        --><li>
                            <figure>
                                <div>
                                    <img src="pages/css3-cd-cases-on-a-shelf/cd-covers/kreator-renewal.jpg" alt="pages/css3-cd-cases-on-a-shelf/cd-covers/kreator-renewal.jpg" />
                                </div>
                            </figure>
                        </li><!--
                        --><li>
                            <figure>
                                <div>
                                    <img src="pages/css3-cd-cases-on-a-shelf/cd-covers/sepultura-arise.jpg" alt="pages/css3-cd-cases-on-a-shelf/cd-covers/sepultura-arise.jpg" />
                                </div>
                            </figure>
                        </li><!--
                        --><li>
                            <figure>
                                <div>
                                    <img src="pages/css3-cd-cases-on-a-shelf/cd-covers/metallica-and-justice-for-all.jpg" alt="pages/css3-cd-cases-on-a-shelf/cd-covers/metallica-and-justice-for-all.jpg" />
                                </div>
                            </figure>
                        </li><!--
                        --><li>
                            <figure>
                                <div>
                                    <img src="pages/css3-cd-cases-on-a-shelf/cd-covers/sodom-tapping-the-vein.jpg" alt="pages/css3-cd-cases-on-a-shelf/cd-covers/sodom-tapping-the-vein.jpg" />
                                </div>
                            </figure>
                        </li>
                    </ul>
                </div>
            </div>

            <h2>Frontal</h2>

            <div class="acidjs-cases-shelf">
                <div>
                    <ul>
                        <li>
                            <figure>
                                <div>
                                    <img src="pages/css3-cd-cases-on-a-shelf/cd-covers/slayer-south-of-heaven.jpg" alt="pages/css3-cd-cases-on-a-shelf/cd-covers/slayer-south-of-heaven.jpg" />
                                </div>
                            </figure>
                        </li><!--
                        --><li>
                            <figure>
                                <div>
                                    <img src="pages/css3-cd-cases-on-a-shelf/cd-covers/kreator-renewal.jpg" alt="pages/css3-cd-cases-on-a-shelf/cd-covers/kreator-renewal.jpg" />
                                </div>
                            </figure>
                        </li><!--
                        --><li>
                            <figure>
                                <div>
                                    <img src="pages/css3-cd-cases-on-a-shelf/cd-covers/sepultura-arise.jpg" alt="pages/css3-cd-cases-on-a-shelf/cd-covers/sepultura-arise.jpg" />
                                </div>
                            </figure>
                        </li><!--
                        --><li>
                            <figure>
                                <div>
                                    <img src="pages/css3-cd-cases-on-a-shelf/cd-covers/metallica-and-justice-for-all.jpg" alt="pages/css3-cd-cases-on-a-shelf/cd-covers/metallica-and-justice-for-all.jpg" />
                                </div>
                            </figure>
                        </li><!--
                        --><li>
                            <figure>
                                <div>
                                    <img src="pages/css3-cd-cases-on-a-shelf/cd-covers/sodom-tapping-the-vein.jpg" alt="pages/css3-cd-cases-on-a-shelf/cd-covers/sodom-tapping-the-vein.jpg" />
                                </div>
                            </figure>
                        </li>
                    </ul>
                </div>
            </div>
        
        
/*
 * CSS3 CD Cases on a Shelf
 * @version 1.0
 * @author Martin Ivanov
 * @url portfolio http://wemakesites.net/
 * @url twitter https://twitter.com/wemakesitesnet
 * @url blog http://acidmartin.wordpress.com/
 **/

/*
 * Do you like this solution? Please, donate:
 * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
 **/

.acidjs-cases-shelf > div::before,
.acidjs-cases-shelf > div::after,
.acidjs-cases-shelf::after,
.acidjs-cases-shelf::before,
.acidjs-cases-shelf ul::before,
.acidjs-cases-shelf ul::after,
.acidjs-cases-shelf figure > div::before,
.acidjs-cases-shelf figure > div::after,
.acidjs-cases-shelf.acidjs-cases-tilted li::before
{
    content: "";
}

.acidjs-cases-shelf > div::before,
.acidjs-cases-shelf > div::after,
.acidjs-cases-shelf::before,
.acidjs-cases-shelf ul::before,
.acidjs-cases-shelf ul::after,
.acidjs-cases-shelf figure > div::after,
.acidjs-cases-shelf.acidjs-cases-tilted li::before
{
    position: absolute;
}

.acidjs-cases-shelf,
.acidjs-cases-shelf li,
.acidjs-cases-shelf figure,
.acidjs-cases-shelf figure > div,
.acidjs-cases-shelf.acidjs-cases-tilted li
{
    position: relative;
}

.acidjs-cases-shelf,
.acidjs-cases-shelf li,
.acidjs-cases-shelf figure,
.acidjs-cases-shelf.acidjs-cases-tilted li
{
    display: inline-block;
}

.acidjs-cases-shelf > div::before,
.acidjs-cases-shelf > div::after,
.acidjs-cases-shelf figure > div,
.acidjs-cases-shelf.acidjs-cases-tilted li::before
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.acidjs-cases-shelf > div::before,
.acidjs-cases-shelf > div::after,
.acidjs-cases-shelf figure img,
.acidjs-cases-shelf figure > div::before
{
    height: 100%;
}

.acidjs-cases-shelf::before,
.acidjs-cases-shelf > div::before,
.acidjs-cases-shelf > div::after
{
    left: 27px;
}

.acidjs-cases-shelf::after,
.acidjs-cases-shelf::before,
.acidjs-cases-shelf.acidjs-cases-tilted li::before
{
    display: block;
}

.acidjs-cases-shelf::after,
.acidjs-cases-shelf figure img,
.acidjs-cases-shelf figure > div::after
{
    width: 100%;
}

.acidjs-cases-shelf > div::before,
.acidjs-cases-shelf > div::after,
.acidjs-cases-shelf::before
{
    right: 27px;
}

.acidjs-cases-shelf::before,
.acidjs-cases-shelf ul::before,
.acidjs-cases-shelf ul::after
{
    bottom: 8px;
}

.acidjs-cases-shelf figure,
.acidjs-cases-shelf figure > div
{
    width: 140px;
    overflow: hidden;
}

.acidjs-cases-shelf > div::before,
.acidjs-cases-shelf > div::after
{
    z-index: -1;
}

.acidjs-cases-shelf > div::after,
.acidjs-cases-shelf figure > div::after
{
    top: 0;
}

.acidjs-cases-shelf li,
.acidjs-cases-shelf.acidjs-cases-tilted li::before
{
    z-index: 5;
}

.acidjs-cases-shelf ul::before,
.acidjs-cases-shelf ul::after
{
    z-index: 2;
    width: 0;
    height: 0;
    border-style: solid;
}

.acidjs-cases-shelf figure > div::after,
.acidjs-cases-shelf.acidjs-cases-tilted li:hover
{
    z-index: 10;
}

.acidjs-cases-shelf figure img,
.acidjs-cases-shelf figure > div::before
{
    display: table-cell;
}

.acidjs-cases-shelf *
{
    padding: 0;
    margin: 0;
    list-style: none;
}

.acidjs-cases-shelf > div::before
{
    background: #000 url("../pages/css3-cd-cases-on-a-shelf/example/poster.jpg") no-repeat;
    background-size: cover;
    border: solid 1px #24252a;
    opacity: .75;
}

.acidjs-cases-shelf > div::after
{
    box-shadow: 0 0 60px 20px rgba(0, 0, 0, .80) inset;
}

.acidjs-cases-shelf::after
{
    height: 8px;
    background: #24252a;
}

.acidjs-cases-shelf::before
{
    background: #303138;
    height: 23px;
}

.acidjs-cases-shelf ul
{
    padding: 24px 0 0;
}

.acidjs-cases-shelf ul::before
{
    border-color: transparent transparent #303138;
    border-width: 0 0 23px 27px;
    left: 0;
    
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

.acidjs-cases-shelf ul::after
{
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #303138;
    border-width: 23px 0 0 27px;
    right: 0;
}

.acidjs-cases-shelf li
{
    margin: 8px;
}

.acidjs-cases-shelf li:first-child
{
    margin-left: 27px;
}

.acidjs-cases-shelf li:last-child
{
    margin-right: 27px;
}

.acidjs-cases-shelf figure
{
    padding: 1px 1px 1px 0;
    border: solid 1px #636260;
    box-shadow: -1px 2px 4px 0px #000;
    background: #666;
}

.acidjs-cases-shelf figure > div
{
    height: 130px;
    display: table;
}

.acidjs-cases-shelf figure > div::before
{    
    width: 12px;
    background: #444;
    border-right: solid 1px #666;
}

.acidjs-cases-shelf figure > div::after
{
    left: 35px;
    height: 200%;
    background: rgba(255, 255, 255, .20);
    
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

.acidjs-cases-shelf.acidjs-cases-tilted li
{
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    -ms-perspective: 300px;
    -o-perspective: 300px;
}

.acidjs-cases-shelf.acidjs-cases-tilted li::before
{
    top: -12px;
    left: 23px;
    bottom: -10px;
    width: 6px;
    background: #333;
    
    -webkit-transform: rotateY(-10deg);
    -moz-transform: rotateY(-10deg);
    -ms-transform: rotateY(-10deg);
    -o-transform: rotateY(-10deg);
}

.acidjs-cases-shelf.acidjs-cases-tilted figure
{
    -webkit-transform: rotateY(50deg);
    -moz-transform: rotateY(50deg);
    -ms-transform: rotateY(50deg);
    -o-transform: rotateY(50deg);
}

.acidjs-cases-shelf.acidjs-cases-tilted li
{
    width: 34px;
}

.acidjs-cases-shelf.acidjs-cases-tilted > div
{
    padding: 0 110px 0 0;
}

.acidjs-cases-shelf.acidjs-cases-tilted li:hover::before
{
    display: none;
}

.acidjs-cases-shelf.acidjs-cases-tilted li figure
{
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    -ms-transition: all 100ms ease-in;
    -o-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}

.acidjs-cases-shelf.acidjs-cases-tilted li:hover figure
{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}