Xoay hình nền bằng CSS3

Question

Tôi có hình nền có mũi tên trỏ sang phải. Khi người dùng nhấp vào nút, trạng thái đã chọn sẽ thay đổi mũi tên để chỉ xuống (sử dụng vị trí nền khác trong hình ảnh của tôi).

Có cách nào để tạo hiệu ứng này bằng CSS3 vì vậy khi nút được nhấp và jQuery gán cho nó lớp "đã chọn", nó sẽ xoay trong hoạt ảnh (chỉ 90 độ) từ phải xuống dưới? (tốt nhất là sử dụng hình ảnh/vị trí đơn có mũi tên trỏ sang bên phải)

Tôi không chắc chắn liệu có nên sử dụng khung hình hoạt ảnh hoặc biến đổi hay không.

Answer 1

bạn có thể sử dụng ::after (hoặc ::before) pseudo-element, để tạo ra các hình ảnh động

div /*some irrelevant css */ 
{ 
    background:-webkit-linear-gradient(top,orange,orangered); 
    background:-moz-linear-gradient(top,orange,orangered); 
    float:left;padding:10px 20px;color:white;text-shadow:0 1px black; 
    font-size:20px;font-family:sans-serif;border:1px orangered solid; 
    border-radius:5px;cursor:pointer; 
} 

/* element to animate */ 
div::after    /* you will use for example "a::after" */ 
{ 
    content:' ►';  /* instead of content you could use a bgimage here */ 
    float:right; 
    margin:0 0 0 10px; 
    -moz-transition:0.5s all; 
    -webkit-transition:0.5s all; 
} 

/* actual animation */ 
div:hover::after   /* you will use for example "a.selected::after" */ 
{ 
    -moz-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
} 

HTML :

<div>Test button</div> 

trong trường hợp của bạn sẽ sử dụng lớp element.selected thay vì

jsfiddle bản demo: http://jsfiddle.net/p8kkf/

hy vọng điều này giúp

Answer 2

Đây là một lớp css xoay mà tôi đã sử dụng để quay hình nền:

.rotating { 
    -webkit-animation: rotating-function 1.25s linear infinite; 
    -moz-animation: rotating-function 1.25s linear infinite; 
     -ms-animation: rotating-function 1.25s linear infinite; 
     -o-animation: rotating-function 1.25s linear infinite; 
      animation: rotating-function 1.25s linear infinite; 
} 

@-webkit-keyframes rotating-function { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 

@-moz-keyframes rotating-function { 
    from { 
    -moz-transform: rotate(0deg); 
    } 
    to { 
    -moz-transform: rotate(360deg); 
    } 
} 

@-ms-keyframes rotating-function { 
    from { 
    -ms-transform: rotate(0deg); 
    } 
    to { 
    -ms-transform: rotate(360deg); 
    } 
} 

@-o-keyframes rotating-function { 
    from { 
    -o-transform: rotate(0deg); 
    } 
    to { 
    -o-transform: rotate(360deg); 
    } 
} 

@keyframes rotating-function { 
    from { 
    transform: rotate(0deg); 
    } 
    to { 
    transform: rotate(360deg); 
    } 
}