Làm cho div xoay được trong mọi trình duyệt

Question

Đầu tiên tôi đã thấyRotating a Div Element in jQuery nhưng nó không cung cấp cho tôi giải pháp tôi mong muốn.

Tôi có một div với các div có thể kéo trong đó.

vì vậy 1 div chính (bord) với divs trong đó (lớp ngủ) trong divs sleep là hình ảnh được chia tỷ lệ thành 100% chiều rộng và chiều cao của div (giữ tỷ lệ co).

Các div có thể thay đổi kích thước và có thể kéo.

tôi muốn hình ảnh (div) có thể xoay bằng trình xử lý ở phía trên cùng bên phải như với thay đổi kích thước ở góc dưới bên phải.

Hiện tại, html của 1 hình ảnh bị bỏ trong bảng div trông giống như.

<div class="ui-draggable sleep ui-resizable" style="position: absolute; z-index: 1; left: 125px; top: 46px;"> 
    <img src="/imgurl.jpg" class="center"> 
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> 
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div> 
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div> 
</div> 

Các Jquery cho/mặt hàng thay đổi kích thước kéo

.draggable({stack: ".sleep", containment: '#bord' }) 
    .resizable 
    ({containment:'#bord',aspectRatio: true}) 
    .css({position: 'absolute'}) 

tôi muốn làm cho nó xoay ở mọi trình duyệt.

Ai đó có thể giúp tôi đúng cách không?

chỉnh sửa câu hỏi rõ ràng hơn:

Tôi muốn có một div giảm được xoay như trên trang web này: http://mydeco.floorplanner.com/rooms/moodboard/

tôi đang làm cái gì đó trông giống như trang web đó: i có divs với hình ảnh Mà có thể Bị bỏ.

Sau khi thả, tôi muốn chúng có thể xoay được bằng trình xử lý.

Tôi đã thực hiện các div có thể thay đổi kích thước và có thể kéo. xem mã ở trên.

NHƯNG TÔI KHÔNG CÓ Ý TƯỞNG ĐỂ BẮT ĐẦU VỚI NHỮNG ĐIỀU ROTATABLE TẠI SAO TÔI ĐÃ CÂU HỎI CÂU HỎI.

Tôi KHÔNG CÓ VẤN ĐỀ NGUYÊN NHÂN TÔI KHÔNG BIẾT KHI BẮT ĐẦU.

Tôi đã thực hiện một trang thử nghiệm là tôi đã nhận một ratating chút nhưng nó isnt làm việc tốt.

Bạn có thể nhấp vào một trong các hình ảnh ở bên trái.

sau đó họ nhận được đánh dấu bằng một đường viền màu trắng sau đó bấm

Omhoog Rechts Omlaag Liên kết để thay đổi hướng. nhưng tôi muốn họ quay lại với các trình xử lý không phải nút bấm.

Có hơn 600 dòng mã, hầu hết trong số đó là php và jquery i tryd để tạo ra một mã fiddle nhưng có nhiều mã. tất cả jquery đều có thể xem được trong nguồn.

Answer 1

Vì đây là rất thú vị đối với tôi bởi vì tôi biết trong tương lai tôi có thể cần một cái gì đó như thế này, tôi đã nghiên cứu nhiều hơn bình thường và im hạnh phúc vì tôi tìm thấy giải pháp hoàn hảo.

Hãy xem plugin này JQuery https://github.com/gthmb/jquery-free-transform

Plugin này không chỉ cho phép bạn xoay nhưng để giải phóng-transform nguyên tố này, hy vọng bạn tìm thấy nó hữu ích.

Answer 2

OK Sven, Tôi đã kiểm tra các trang web mà bạn đặt làm ví dụ và họ sử dụng một thư viện gọi ExtJS (đây là HTML5 sẵn sàng và do đó tương thích với tất cả các trình duyệt hiện đại) trong đó có một chức năng để xoay bất kỳ yếu tố Ext.draw.Draw-method-rotate

Bây giờ, bạn đã nói rằng các giải pháp được trình bày cho bạn không tương thích với ALL BROWSERS, ok, sau đó kết hợp các giải pháp, trong liên kết mà bạn đăng cung cấp các giải pháp mà bạn có thể kết hợp để làm cho nó tương thích với TẤT CẢ NGƯỜI DÙNG (có vẻ như hầu hết các giải pháp sử dụng CSS vì vậy bạn nên an toàn ở đó) tất cả những gì bạn phải làm là thực sự thực hiện một nỗ lực như @Jay Blanchard gợi ý và bắt đầu thực hiện một số mã.

Cuối cùng giải pháp khác của tôi cho bạn (nếu bạn không thể đưa thư viện ExtJS vào dự án của bạn) là sử dụng thư viện Javascript có tên là raphaeljs. Element.transform([tstr])

Dường như với tôi rằng những gì bạn có thể làm là gắn hình ảnh xử lý vào div, lấy vị trí (x, y) của tay cầm và vượt qua mức độ cần xoay phần tử đó.

Theo như mã đi, tôi không có bất kỳ vào lúc này nhưng nếu tôi có cơ hội tôi sẽ đưa ra một cái gì đó trong vài giờ hoặc lâu hơn

Answer 3

Hãy nhìn vào các CSS3 transform tài sản, đặc biệt là tính năng rotate.

According to caniuse các trình duyệt sau hỗ trợ CSS3 2d chuyển đổi của xoay chức năng:

• IE> 9
• FF> 3
• Chrome> 4
• Opera> 10
• iOS Safari> 3
• Trình duyệt Android> 2.1
• Trình duyệt BB> 7
• Opera Mobile> 11
• Chrome (dành cho Android)
• Firefox (dành cho Android)

iwanttouse.com tập hợp dữ liệu và nói rằng 87.44% of all users can use it.

Không chắc chắn yêu cầu của bạn là gì đối với hỗ trợ trình duyệt, nhưng nếu bạn muốn thực hiện xoay vòng trong IE < 9, hãy xem css rotate property in IE. Bạn sẽ muốn xem useragentman's transforms translator for IE.

Answer 4

Tại sao không sử dụng jQuery UI Rotation plugin: Vui lòng truy cập ->http://vremenno.net/js/jquery-ui-rotation-using-css-transform/ và bạn có thể tải về các plugin bằng cách nhấn vào đây ->