[英]The image is not spinning
我按照jsFiddle頁面http://jsfiddle.net/gionaf/Ugc5g/上的說明在頁面http://www.prezzio.net/上旋轉圖像,但是它不起作用:圖像沒有旋轉。
要清楚,這是要旋轉的圖像:
這是原始代碼:
.spin { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 4s linear infinite; -moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<img class="spin" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
任何想法 ? 謝謝。
試試看,這是帶有所有Vendor prefixes
Demo
img { animation: 2s spin infinite linear; } @keyframes spin { to {transform: rotate(360deg);} }
<img src="http://www.prezzio.net/files/theme/spin.png" alt="">
罪魁禍首在您的main_style.css
行369
。
添加這些行,
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
而且它應該如您所願旋轉。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.