3D-transformation - nur Webkit

by Jens Grochtdreis

HTML

<div id="accordion">
            <article>
                <h2>Section 1</h2>
                <img src="http://lorempixel.com/100/75">
                <p>Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfaßt. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres Großhirns. Ihr Stirnlappen wird stimuliert. Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in konkrete Handlungen umsetzt.</p>
            </article>
            <article>
                <h2>Section 2</h2>
                <img src="http://dummyimage.com/100x75/a20000/fff">
                <p>Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfaßt. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres Großhirns. Ihr Stirnlappen wird stimuliert.</p>
            </article>
            <article>
                <h2>Section 3</h2>
                <img src="http://dummyimage.com/100x75/000/fff">
                <p>Diesmal war Guaredisch ihr Erwählter, weil seine Laufweite einem vollgetankten Bodoni entsprach und seine ungezügelte Unterlänge ihre Serifen so serafisch streifte, daß sie trotz Techtelmechtelei die magere Futura, jene zuverlässige und gern eingesetzte Langstreckenläuferin, rechtsbündig überholen konnten. Leute, giftelte Tiffany, macht endlich maln Punkt. Und das Komma soll sich gefällixt an die richtige Stelle setzen. Und keine Trennungen. Und nicht zu viele Anschläge heut nacht! Die Goudy war vorbei. </p>
            </article>
            <article>
                <h2>Section 4</h2>
                <img src="http://lorempixel.com/100/150">
              ...

CSS

/* Firlefanz */
body {background:#D5DED9;font-family:Arial,Helvetica,sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:Georgia,serif;}
p {line-height:140%;font-size:90%;}
#accordion {margin:100px;}

/* 3D-Verzerrung */
        
#accordion article {
    float: left;
    height: 420px;
    width: 220px;
    margin-left: -180px;
    padding: 20px;
    background: #fff;
    border: 1px solid #f3f3f3;
    box-shadow: 0px 5px 15px gray;
    -webkit-transform: perspective(900px) rotateY(60deg);
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transform: perspective(900px) rotateY(60deg);
    -moz-transition: all 0.7s ease-in-out;
    -o-transform: perspective(900px) rotateY(60deg);
    -o-transition: all 0.7s ease-in-out;
    -ms-transform: perspective(900px) rotateY(60deg);
    -ms-transition: all 0.7s ease-in-out;
}
#accordion article:first-child {
    margin-left: 0px;
}
#accordion article img {
    float: left;
    padding: 0 10px 5px 0;
}
#accordion article:hover {
    -webkit-transform: perspective(0) rotateY(-10deg);
    -moz-transform: perspective(0) rotateY(-10deg);
    -o-transform: perspective(0) rotateY(-10deg);
    -ms-transform: perspective(0) rotateY(-10deg);
    margin: 0 140px 0 -60px;
}

JavaScript

// Funktioniert aktuell noch nicht mit einem anderen Browser als Webkit.