Css hiệu ứng ảnh xoay cho web

10/03/2015 in Thiết kế web

2105 Lượt xem

Các hình ảnh hay biểu tượng liên kết có tác dụng rất lớn trong xây dựng website hay Blog.Nó làm cho người xem bớt nhàm chán với những liên kết toàn là kí tự.

Và sẽ càng tạo được thu hút khi các biểu tượng liên kết đó bất ngờ xoay chong chóng khi chúng ta rê chuột lên…..Sao lại không nhỉ?. DEMO

Ở đây Tôi có 3 đoạn Css tương ứng cho 3 kiểu xoay :

Xoay một vòng theo chiều kim đồng hồ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

p#xoay3601 img{ /* Hieu ung xoay 360 do theo chieu kim dong ho */

–moz–transition: all 0.8s ease–in–out;

–webkit–transition: all 0.8s ease–in–out;

–o–transition: all 0.8s ease–in–out;

–ms–transition: all 0.8s ease–in–out;

transition: all 0.8s ease–in–out;

}

p#xoay3601 img:hover{

–moz–transform: rotate(360deg);

–webkit–transform: rotate(360deg);

–o–transform: rotate(360deg);

–ms–transform: rotate(360deg);

transform: rotate(360deg);

}

Xoay 70 độ theo chiều kim đồng hồ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

p#xoay70 img{ /* hieu ung xoay 70 do */

–moz–transition: all 0.2s ease–in–out;

–webkit–transition: all 0.2s ease–in–out;

–o–transition: all 0.2s ease–in–out;

–ms–transition: all 0.2s ease–in–out;

transition: all 0.2s ease–in–out;

}

p#xoay70 img:hover{

–moz–transform: rotate(70deg);

–webkit–transform: rotate(70deg);

–o–transform: rotate(70deg);

–ms–transform: rotate(70deg);

transform: rotate(70deg);

}

Xoay một vòng ngược chiều kim đồng hồ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

p#xoay3602 img{ /* hieu ung xoay 360 do nguoc kim dong ho */

–moz–transition: all 0.8s ease–in–out;

–webkit–transition: all 0.8s ease–in–out;

–o–transition: all 0.8s ease–in–out;

–ms–transition: all 0.8s ease–in–out;

transition: all 0.8s ease–in–out;

}

p#xoay3602 img:hover{

–moz–transition: all 0.5s ease–in–out;

–webkit–transition: all 0.5s ease–in–out;

–o–transition: all 0.5s ease–in–out;

–ms–transition: all 0.5s ease–in–out;

transition: all 0.5s ease–in–out;

–moz–transform: rotate(–360deg);

–webkit–transform: rotate(–360deg);

–o–transform: rotate(–360deg);

–ms–transform: rotate(–360deg);

transform: rotate(–360deg);

}

Bạn COPY 1 trong các đoạn css trên ( hoặc tất cả nếu muốn ) , rồi chèn vào trước

]]></b:skin>

Còn đây lần lượt là 3 đoạn mã HTML cho 3 hiệu ứng trên:

				
										1
									
										2
									
										3
									
										4
									
										5
									
										6
									
										7
									
										8
									
										9
									
										10
									
										11
									
										12
									
										13
									
										14
									
										15
									
										<p id="xoay3601">
									
										<a href="LINK LIEN KET/">
									
										<img border="0" src="LINK HINH ANH" /></a> </p>
									
										<p id="xoay70">
									
										<a href="LINK LIEN KET/">
									
										<img border="0" src="LINK HINH ANH" /></a>
									
										</p>
									
										<p id="xoay3602">
									
										<a href="LINK LIEN KET/">
									
										<img border="0" src="LINK HINH ANH" /></a>
									
										</p>

Mở rộng: Quan sát 3 đoạn mã trên,chúng ta có thể dễ dàng biến hóa nó xoay theo bất cứ chiều nào bạn muốn,và xoay theo bất cứ góc nào Bằng cách thay đổi các chỉ số góc.

				
										1
									
										2
									
										3
									
										4
									
										5
									
										–moz–transform: rotate(GOCQUAYdeg);
									
										–webkit–transform: rotate(GOCQUAYdeg);
									
										–o–transform: rotate(GOCQUAYdeg);
									
										–ms–transform: rotate(GOCQUAYdeg);
									
										transform: rotate(GOCQUAYdeg);

Thay đổi GOCQUAY theo ý của bạn.Nên để chúng giống nhau .

Mặc định nó sẽ quay theo chiều kim đồng hồ.Nếu muốn quay ngược chiều kim đồng hồ thì thêm dấu “ – ” vào trước chỉ số góc quay.

Chúc các bạn thành công

THAM KHẢO THÊM CÁC SẢN PHẨM HOT NHẤT HIỆN NAY
Giày Cafe SHOEX
Hạ Khang Đường - Ổn định đường huyết
Saffron Extra White
Cốc Nguyệt San BEUCUP
Maxi White
Fysoline - Nước muối sinh lý dành cho bé sơ sinh và trẻ nhỏ
Mặt nạ thon mặt Vline
Finava - Tinh chất vàng sáng da, trị nám ngăn ngừa lão hoá
Trị Mụn Caryophy
Rong Nho Sabudo
Son YUMEISAKURA
Máy Khử Mùi MARKEL
Orlavi - Làm mờ sẹo
Dottorprimo - Trị các vết sẹo nặng
ZEN - Sản phẩm giúp hỗ trợ giảm căng thẳng
Nồi Chiên Không Dầu COSORI
Nồi Chiên Không Dầu LOTTE
Dưỡng Trắng RealWhite
Máy rửa mặt Pebble Lisa
Dầu Gội Nature Quen - Sao Thái Dương

Giáo Trình Hay Chia Sẻ Thủ Thuật PC, Giáo Trình, Khóa Học Online, Mẹo Vặt

Css hiệu ứng ảnh xoay cho web

Bài viết liên quan

Css hiệu ứng ảnh xoay cho web

BẠN ĐÃ XEM CHƯA?

Bài viết liên quan

Quản trị web là gì? hướng dẫn cách quản trị website

Quản Trị Website rượu vang

Quản Trị Website dụng cụ cầm tay

Thiết Kế Web rượu vang

Thiết Kế Web dụng cụ cầm tay

SQL INJECTION LÀ GÌ?