Css lật hình ảnh theo chiều ngang

Tôi đang cố gắng xoay một hình ảnh bằng cách sử dụng biến đổi

div:hover #myimage {
    -webkit-transform: translateX[-100%] rotate[-90deg]; /* Safari */
    -moz-transform: translateX[-100%] rotate[-90deg]; /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX[-100%] rotate[-90deg]; /* IE9 */
    -o-transform: translateX[-100%] rotate[-90deg]; /* Opera */
    transform: translateX[-100%] rotate[-90deg]; /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

6 sao cho nó được căn chỉnh chính xác trong vòng ____8, tức là góc trên cùng bên trái của hình ảnh phải được căn chỉnh theo góc trên cùng bên trái của

div:hover #myimage {
    -webkit-transform: translateX[-100%] rotate[-90deg]; /* Safari */
    -moz-transform: translateX[-100%] rotate[-90deg]; /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX[-100%] rotate[-90deg]; /* IE9 */
    -o-transform: translateX[-100%] rotate[-90deg]; /* Opera */
    transform: translateX[-100%] rotate[-90deg]; /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

7

Như bạn có thể thấy ở đây [-> Nhấn vào

div:hover #myimage {
    -webkit-transform: translateX[-100%] rotate[-90deg]; /* Safari */
    -moz-transform: translateX[-100%] rotate[-90deg]; /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX[-100%] rotate[-90deg]; /* IE9 */
    -o-transform: translateX[-100%] rotate[-90deg]; /* Opera */
    transform: translateX[-100%] rotate[-90deg]; /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

0] Điều này không hoạt động. Có cách nào để sửa lỗi này không?

.

Hỏi ngày 30 tháng 8 năm 2013 lúc 11. 22 30 tháng 8, 2013 lúc 11. 22

fuenfundachtzigfuenfundachtzig fuenfundachtzig

7. 60612 Huy hiệu vàng61 Huy hiệu bạc84 Huy hiệu đồng12 huy hiệu vàng61 huy hiệu bạc84 huy hiệu đồng

2

Nếu bạn muốn nó được thực hiện trong CSS, đây là cách

.rot90 {
    -webkit-transform: translateY[-100%] rotate[90deg]; /* Safari */
    -moz-transform: translateY[-100%] rotate[90deg]; /* Firefox 3.6 Firefox 4 */
    /*-moz-transform-origin: right top; */
    -ms-transform: translateY[-100%] rotate[90deg]; /* IE9 */
    -o-transform: translateY[-100%] rotate[90deg]; /* Opera */
    transform: translateY[-100%] rotate[90deg]; /* W3C */  
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
}

Cập nhật bản demo

Bí quyết là xoay hình ảnh xung quanh góc dưới bên trái. Sau khi hoàn thành, nó giảm 100% chiều cao;

To have been hiệu ứng tương tự cho vòng quay nghịch đảo. [di mouse to change]

div:hover #myimage {
    -webkit-transform: translateX[-100%] rotate[-90deg]; /* Safari */
    -moz-transform: translateX[-100%] rotate[-90deg]; /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX[-100%] rotate[-90deg]; /* IE9 */
    -o-transform: translateX[-100%] rotate[-90deg]; /* Opera */
    transform: translateX[-100%] rotate[-90deg]; /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

Đã trả ngày 30 tháng 8 năm 2013 lúc 17. 48 30 tháng 8, 2013 lúc 17. 48

2

Sử dụng một số jQuery, bạn có thể nhận được

div:hover #myimage {
    -webkit-transform: translateX[-100%] rotate[-90deg]; /* Safari */
    -moz-transform: translateX[-100%] rotate[-90deg]; /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX[-100%] rotate[-90deg]; /* IE9 */
    -o-transform: translateX[-100%] rotate[-90deg]; /* Opera */
    transform: translateX[-100%] rotate[-90deg]; /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

1 của cha mẹ, trừ đi từ

div:hover #myimage {
    -webkit-transform: translateX[-100%] rotate[-90deg]; /* Safari */
    -moz-transform: translateX[-100%] rotate[-90deg]; /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX[-100%] rotate[-90deg]; /* IE9 */
    -o-transform: translateX[-100%] rotate[-90deg]; /* Opera */
    transform: translateX[-100%] rotate[-90deg]; /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

1 mới và sử dụng lề để đưa nó trở lại thùng chứa. Nó hoạt động với tất cả các vòng quay. This is fiddle

JS

________số 8

Đã trả ngày 30 tháng 8 năm 2013 lúc 13. 09 30 Tháng tám 2013 lúc 13. 09

1

Từ các câu trả lời được đưa ra cho đến nay tôi cho rằng không có cách nào tiếp cận đơn giản hơn so với việc sử dụng JavaScript để "sắp xếp lại" hình ảnh. Làm vậy, hãy để tôi chia sẻ cách tiếp cận mà tôi đã sử dụng