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

ดาวน์โหลด jQuery diagonal rotation with CSS3 transitions
เข้าชมทั้งหมด : 705 ครั้ง | ดาวน์โหลด : 157 ครั้ง | หมวด : 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 }

This will rotate the whole list 30 degrees clockwise and pull it down from the top of the document. This sets the base for the rotation. Now for the individual list items and images.

01 ul.portfolio li{
02         border: 1px solid #999999;
03         height: 100px;
04         list-style:none;
05         margin-left: 0;
06         opacity: 0.5;
07         -webkit-transition: all 0.5s ease-in;
08         -moz-transition: all 0.5s ease-in;
09         -o-transition: all 0.5s ease-in;
10         width: 200px;
11 }
12   
13         ul.portfolio li img{
14                 height: 100px;
15                 -webkit-transition: all 0.5s ease-in;
16                 -moz-transition: all 0.5s ease-in;
17                 -o-transition: all 0.5s ease-in;
18                 width: 200px;
19         }

ข้อมูลการดาวน์โหลด jQuery diagonal rotation with CSS3 transitions

เข้าชมทั้งหมด

: 705 ครั้ง


ตัวอย่างการทำงาน

ดาวน์โหลดไปแล้ว

: 157 ครั้ง

ประเภท

: Freeware

ขนาดไฟล์

: 549.3 kb

หมวดหมู่

: Image Effects

แนะนำโปรแกรมที่เกี่ยวข้อง


Responsive Image Sizes At Different Resolutions


An Experiment with Mobile-First Images that Scale Responsively & Responsibly What is this? The goal of this technique is to deliver optimized, contextual image sizes in responsive layouts that utilize…
เข้าชมทั้งหมด : 769 ครั้ง | ดาวน์โหลด : 154 ครั้ง | หมวด : Image Effects

CSS3 animation, shadows image hover effect


A sleek image gallery that takes advantage of CSS3 animation, shadows, and the “transform” property to instantly add a smooth hover effect to its images, whereby the image enlarges and moves…
เข้าชมทั้งหมด : 753 ครั้ง | ดาวน์โหลด : 201 ครั้ง | หมวด : Image Effects

jQuery 3D Parallax Background Effect


The HTML Our page will consist of 6 sections: header, footer and 4 articles. On the right, we’ll place an unordered list that links between the articles and remains fixed on the page so it doesn’t…
เข้าชมทั้งหมด : 847 ครั้ง | ดาวน์โหลด : 181 ครั้ง | หมวด : Image Effects

Rotating hover Image with JQuery


Creating a jquery plugin is easier than it sound, first time I heard about creating 3rd party plugin sounds scary, maybe need more deeper understanding about the platform, but not in jquery. Well I just…
เข้าชมทั้งหมด : 718 ครั้ง | ดาวน์โหลด : 176 ครั้ง | หมวด : Image Effects

Cool jQuery Nautilus plugin


jQuery plug-in based on Google's Doodle honoring Jules Verne (it was released on February 8, 2011). The letters of Google looked like hatches that allowed to see "under the sea",…
เข้าชมทั้งหมด : 639 ครั้ง | ดาวน์โหลด : 174 ครั้ง | หมวด : Image Effects

หมวดหมู่โปรแกรม

 เกมส์
 ไดร์ฟเวอร์
 โปรแกรมด้านความปลอดภัย
 บราวเซอร์และปลั๊กอิน
 โปรแกรมด้านธุรกิจ
 โปรแกรมการติดต่อสื่อสาร
 เครื่องมือ สำหรับนักพัฒนา
 โปรแกรมสำหรับจัดการภาพ
 โปรแกรมเพื่อการศึกษา
 โปแกรมการออกแบบกราฟฟิก
 โปรแกรมด้านอินเตอร์เน็ต
 โปรแกรมสำหรับ iTunes & iPod
 โปรแกรมสำหรับ MP3 & Audio
 โปรแกรมด้านเครือข่าย
 โปรแกรมทั่วไป & OS
 โปรแกรมจัดการวีดีโอ&ภาพยนต์
 เว็บไซต์สำเร็จรูป (CMS)

Free Templates

 Joomla Template
 WordPress Template
 Free Templates

jQuery Script

 Menu & Navigation
 Slideshow & Scroller
 Image Effects
 HTML5
 Form