ดาวน์โหลดฟรี

ดาวน์โหลด jQuery diagonal rotation with CSS3 transitions
เข้าชมทั้งหมด : 702 ครั้ง | ดาวน์โหลด : 156 ครั้ง | หมวด : Image Effects


jQuery diagonal rotation with CSS3 transitions

We start with minimal markup. Always make your markup as simple as possible; don’t duplicate elements unless absolutely necessary. Markup should be a semantic outline of your content. With that in mind, here’s all the markup we need:

1 <ul class="portfolio">
2         <li><img src="img/portfolio-1.jpg" alt="Image 1"></li>
3         <li><img src="img/portfolio-2.jpg" alt="Image 2"></li>
4         <li class="feature"><img src="img/portfolio-3.jpg" alt="Image 3"></li>
5         <li><img src="img/portfolio-4.jpg" alt="Image 4"></li>
6         <li><img src="img/portfolio-5.jpg" alt="Image 5"></li>
7 </ul>

There is one simple unordered list of images for the portfolio. A class of “feature” is applied to the list item housing the current highlighted image. That’s it for the HTML, let’s give this list some style.

Create only the large form of your images and use CSS to scale down. In this case all the images are 600 x 300.

Style

The CSS will do quite a bit of work for the markup. We can achieve all of our design and animation with only CSS and move into scripting from there. We’ll move through each element starting with the unordered list.

1 ul.portfolio{
2         margin: 50px auto 0;
3         -ms-transform:rotate(30deg);
4         -webkit-transform:rotate(30deg);
5         -moz-transform:rotate(30deg);
6         width: 200px;
</
7 }