CSS ile 3D Akordiyon Tasarımı

[Toplam: 0   Ortalama: 0/5]
accordioncss3 - 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;
}
demolink - CSS ile 3D Akordiyon Tasarımı downloadlink - CSS ile 3D Akordiyon Tasarımı

Author: admin

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir