CSS ile 3D Akordiyon Tasarımı

Son günlerde 3D CSS yapılar oldukça popüler olmaya başladı. Tüm yabancı bloglarda CSS ile 3D menüler ve şablonlar için öğretici makaleler yayınlamaktadır. Bende bu öğretilerden birisi ile üç boyutlu Akordiyon şeklinde bir sayfa örneği sunmak istiyorum.

HTML Yapısı

<div id="accordion">
   <article>
      <h2>Section 1</h2>
      <img src="img/img1.jpg" alt="" width="100" height="88" /> 
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
         totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </p>
   </article>
   <article>
      <h2>Section 2</h2>
      <img src="img/img2.jpg" alt="" width="100" height="75" /> 
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
         Aenean commodo ligula eget dolor. Aenean massa. Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
         accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi 
         architecto beatae vitae dicta sunt explicabo.
      </p>
   </article>
   <article>
      <h2>Section 3</h2>
      <img src="img/img3.jpg" alt="" width="100" height="67" /> 
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
         eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </p>
   </article>
   <article>
      <h2>Section 4</h2>
      <img src="img/img4.jpg" alt="" width="100" height="75" /> 
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
         Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
         totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </p>
   </article>

CSS Yapısı

#accordion {
      margin: 100px;
   }
   #accordion article {
      -webkit-transform: perspective(900px) rotateY(60deg);
      -webkit-transition: all 0.7s ease-in-out;
      background: #fff;
      border: 1px solid #f3f3f3;
      box-shadow: 0px 5px 15px gray;
      float: left;
      height: 420px;
      margin-left: -180px;
      padding: 20px;
      width: 220px;
   }
   #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);
      margin: 0 140px 0 -60px;
   }