GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam

AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam

HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ

Trang chủ >> WapMaster

Tìm Kiếm → Thảo Luận

Share code Hiệu ứng xoay tròn và phóng to ảnh bằng CSS3

RoSino18k

07-11-2015

Đoạn CSS3 này có tác dụng khi người dùng chạm vào bức ảnh thì nó sẽ xoay tròn đồng thời sẽ to dần lên vừa màn hình thì dừng lại. Khá là thú vị & lạ mắt

Copy đoạn CSS dưới và dán vào style của bạn

#cudemvn {

padding: 1px;

margin: 4px 4px 0 0;

border: 1px solid #d5d5d5;

transition: all 15s ease;

-webkit-transition: all 15s ease;

-moz-transition: all 15s ease;

transition-delay: 5s;

-webkit-transition-delay: 5s;

-moz-transition-delay: 5s;

transform: rotate(0deg);

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

width: 45px;

height: 45px

}

#cudemvn:hover {

box-shadow: 0px 0px 10px #666;

-moz-box-shadow: 0px 0px 10px #666;

-webkit-box-shadow: 0px 0px 10px #666;

border-radius: 5px;

background-color: #ffffff;

padding: 5px;

transition: all 3s ease;

-webkit-transition: all 3s ease;

-moz-transition: all 3s ease;

transform: rotate(360deg);

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

position: relative;

width: 100px;

height: 100px;

}