Làm cách nào để đặt góc xoay của div trong javascript?

Hoặc nói chung, có cách nào để thêm CSS tùy ý vào một phần tử HTML trong javascript mà không có JQuery không?Làm cách nào để đặt góc xoay của div trong javascript?

Hiện tại, tính năng này hoạt động trong Chrome, Firefox và IE 9/10.

var css = getRotationCSS(angle); 
var div = document.getElementById('mydiv'); 
//div.css = css; ??? 
div.innerHTML = '<div style="'+css+'">HELLO</div>';

tôi có thêm một div bên trong div để có được style = ''

Tất cả các ví dụ tôi đã nhìn thấy chỉ có một góc hardcoded nhưng tôi cần nó để làm việc cho bất kỳ góc 0- 360, tôi có nên tạo 360 lớp, 1 cho mỗi cấp độ không, sau đó đặt lớp học?

function getRotationCSS(deg) 
{ 
    return "\ 
     -webkit-transform: rotate("+deg+"deg); \ 
     -moz-transform: rotate("+deg+"deg); \ 
     -ms-transform: rotate("+deg+"deg); \ 
     -o-transform: rotate("+deg+"deg); \ 
     transform: rotate("+deg+"deg); \ 
     -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)'; \ 
     filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); \ 
    "; 
}

Có mã IE 7/8 không đúng, tôi cần một hàm để chuyển đổi độ thành ma trận.

Ngoài ra mã IE 7/8 không xoay nó ở tất cả khi tôi bắt chước IE 7/8 trong IE của tôi 10. Tôi googled mã và nó là nghĩa vụ phải xoay nó 45:

<html> 
    <body> 
     <div style='border:1px solid green;margin:333px;padding:333px;'> 
      <div style=" 
       -webkit-transform: rotate(45deg); 
       -moz-transform: rotate(45deg); 
       -ms-transform: rotate(45deg); 
       -o-transform: rotate(45deg); 
       transform: rotate(45deg); 
       -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)\"; 
       filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); 
      "> 
       HELLO 
      </div> 
     </div> 
    </body> 
</html>

Nguồn

2013-05-16 Curtis

Bạn không nên biết chuyển đổi css nào áp dụng qua javascript (sử dụng tính năng phát hiện)? – Alan

Không js fiddle? GÌ? : O – Senjai

sử dụng sau đây để tạo ra các ma trận xoay chính xác cho deg:

// First compute deg in radians 
var rad = deg*Math.PI/180; 

// Then when specifying the rotation matrices use: 
'... M11=' + Math.cos(rad) + 
    ', M12=' + -Math.sin(rad) + 
    ', M21=' + Math.sin(rad) + 
    ', M22=' + Math.cos(rad) + ' ...'

Cũng cho ms-filter không sử dụng dấu nháy đơn, kể từ khi bạn sử dụng dấu nháy đơn trong chuỗi cho 'auto expand' Thay đổi dấu ngoặc kép bên ngoài của bạn để dấu ngoặc kép và thoát khỏi chúng đúng cách :

-ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', ...

Nguồn

2013-05-16 02:41:30 Paulpro

Cảm ơn mẹo nhưng nó vẫn không quay trong IE 7 hoặc 8. Tôi đã thêm một ví dụ html đầy đủ. – Curtis

Mã này xoay -45 độ

trong ví dụ 7-8 quá.

<div style=" 
    width: 200px; 
    height: 14px; 
    border: none; 
    background-image: url(http://image.ohozaa.com/i/47d/vliemC.png); 
    text-align: center; 
    color: #fff; 
    font-size: 14px; 
    line-height: 16px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M22=0.7071067811865476, M21=-0.7071067811865475, M12=0.7071067811865475, M11=0.7071067811865476); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M22=0.7071067811865476, M21=-0.7071067811865475, M12=0.7071067811865475, M11=0.7071067811865476)"; /* IE8 */ 
    transform: rotate(-45deg); 
"> 
</div> 
<style type="text/css"> 
</style>

Nguồn

2014-03-13 13:48:27 user3282833

Làm cách nào để đặt góc xoay của div trong javascript?

Trả lời

Các vấn đề liên quan