Как повернуть изображение / div в JavaScript в браузерах, отличных от IE - PullRequest
Новая
       14

Как повернуть изображение / div в JavaScript в браузерах, отличных от IE

4 голосов
/ 13 декабря 2011

Мне нужно динамически поворачивать изображение на угол, указанный пользователем.

Я использую следующий код, но он работает только для IE, а не для любого другого браузера. 

<div id="frame1" style="overflow:hidden" width='300' height='300'>
    <div id="frame2" width='200' height='200'>
        <img src='1.jpeg'' id='im' src='1.jpeg' width='10' height='10'>
    </div>
</div>

<script type="text/javascript">

rotate(frame2, 45);

function rotate (elem, deg)
{
    if (navigator.appName=='Microsoft Internet Explorer')
    {
        rad = deg*Math.PI/180;

        elem.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";

        elem.filters.item(0).M11 = Math.cos(rad);
        elem.filters.item(0).M12 = -Math.sin(rad);
        elem.filters.item(0).M21 = Math.sin(rad);
        elem.filters.item(0).M22 = Math.cos(rad);
        elem.style.marginLeft=((canvsize-elem.offsetWidth)/2)+'px'
        elem.style.marginTop=((canvsize-elem.offsetHeight)/2)+'px'
    }
    else
    {
        elem.style.MozTransform    = 'rotate(' + deg + ')';
        elem.style.WebkitTransform = 'rotate(' + deg + ')';
        elem.style.OTransform      = 'rotate(' + deg + ')';
        elem.style.MsTransform     = 'rotate(' + deg + ')';
        elem.style.transform       = 'rotate(' + deg + ')';
    }
}

</script>

Не могли бы вы помочь?

Ответы [ 3 ]

7 голосов
/ 13 декабря 2011

Посмотрите на пример CSS: 

-webkit-transform: rotate(45deg);

Как видите, вы забыли добавить deg 

elem.style.mozTransform    = 'rotate(' + deg + 'deg)';
elem.style.webkitTransform = 'rotate(' + deg + 'deg)';
elem.style.oTransform      = 'rotate(' + deg + 'deg)';
elem.style.msTransform     = 'rotate(' + deg + 'deg)';
elem.style.transform       = 'rotate(' + deg + 'deg)';
0 голосов
/ 13 декабря 2011

Вы забыли добавить deg к свойству css.

Вы также должны добавить transform origin к изображению, чтобы оно вращалось вокруг центра (при условии, что это то, что вы пытаетесь сделать).

Этот код должен сделать это. 

<!DOCTYPE html>
<html>
<head>
<title></title>

<style>
</style>

</head>
<body>

<div id="frame1" style="overflow:hidden" width='300' height='300'>
    <div id="frame2" width='200' height='200'>
        <img src='1.jpeg' id='im' src='1.jpeg' width='10' height='10'>
    </div>
</div>

<script type="text/javascript">

rotate(frame2, 45);

function rotate (elem, deg)
{
    if (navigator.appName=='Microsoft Internet Explorer')
    {
        rad = deg*Math.PI/180;

        elem.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')";

        elem.filters.item(0).M11 = Math.cos(rad);
        elem.filters.item(0).M12 = -Math.sin(rad);
        elem.filters.item(0).M21 = Math.sin(rad);
        elem.filters.item(0).M22 = Math.cos(rad);
        elem.style.marginLeft=((canvsize-elem.offsetWidth)/2)+'px'
        elem.style.marginTop=((canvsize-elem.offsetHeight)/2)+'px'
    }
    else
    {

        elem.style.MozTransformOrigin = "5px 5px";
        elem.style.WebkitTransformOrigin = "5px 5px";
        elem.style.OTransformOrigin = "5px 5px";
        elem.style.MsTransformOrigin = "5px 5px";
        elem.style.transformOrigin = "5px 5px";

        elem.style.MozTransform    = 'rotate(' + deg + 'deg)';
        elem.style.WebkitTransform = 'rotate(' + deg + 'deg)';
        elem.style.OTransform      = 'rotate(' + deg + 'deg)';
        elem.style.MsTransform     = 'rotate(' + deg + 'deg)';
        elem.style.transform       = 'rotate(' + deg + 'deg)';
    }
}

</script>

</body>
</html>
0 голосов
/ 13 декабря 2011

На самом деле это проще в браузерах, которые не IE.MDN имеет хорошую документацию о том, как это сделать с помощью CSS3.Здесь также есть .

Для браузеров Webkit эта страница должна помочь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...