Как установить угол поворота div в javascript?

Или, в общем, есть ли способ добавить произвольный CSS в HTML-элемент в javascript без JQuery?Как установить угол поворота div в javascript?

Прямо сейчас это работает в Chrome, Firefox и IE 9/10.

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

Я должен добавить DIV внутри DIV, чтобы добраться до стиля = «»

Всех примеров, я видел просто жёстко прописанный угол, но мне нужно работать для любого угла 0- 360, я должен сделать 360 классов, 1 для каждой степени, а затем установить класс?

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'); \ 
    "; 
}

Да, код IE 7/8 неверен, мне нужна функция для преобразования градусов в матрицу.

Также код IE 7/8 не вращать его на всех, когда я эмулировать IE 7/8 в моем IE 10. Я гугле код и он должен повернуть его на 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>

источник

2013-05-16 Curtis

Разве вы не знаете, какой css преобразовать для применения через javascript (используя обнаружение функции)? – Alan

Нет js скрипка? ЧТО? : O – Senjai

используйте следующие действия для создания правильной матрицы вращения для 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) + ' ...'

Также для ms-filter не использовать одинарные кавычки, так как вы использовать одинарные кавычки внутри строки для 'auto expand' Измените внешние кавычки, чтобы двойные кавычки и избежать их правильно :

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

источник

2013-05-16 02:41:30 Paulpro

Спасибо за отзыв, но он по-прежнему не вращается в IE 7 или 8. Я добавил полный html-пример. – Curtis

Этот код повернуть -45 степень

в 7-8 т тоже.

<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>

источник

2014-03-13 13:48:27 user3282833

Как установить угол поворота div в javascript?

ответ

Смежные вопросы