2 abu593218127 abu593218127 于 2016.04.22 14:33 提问

js 实现图片的旋转 结合css3的属性transform

我想在IE9下实现点击按钮进行图片的翻转,之前使用了滤镜,但有一个问题,图片在旋转时不是以图片中心为定点进行旋转,在网上查了css3的一个属性transform 可以实现以中心点进行旋转,但试了好多,都没实现,下面是滤镜实现代码:
/**
* 图片旋转
* @param id 图片id
* @param angle 旋转度数
* @param whence 旋转方向、从何处开始旋转
*/
rotate : function(id,angle,whence) {
var p = document.getElementById(id);
if (!whence) {
p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;
} else {
p.angle = angle;
}

    if (p.angle >= 0) {
        var rotation = Math.PI * p.angle / 180;
    } else {
        var rotation = Math.PI * (360+p.angle) / 180;
    }
    var costheta = Math.cos(rotation);
    var sintheta = Math.sin(rotation);

    if (document.all && !window.opera) {
        var canvas = document.createElement('img');

        canvas.src = p.src;
        canvas.height = p.height;
        canvas.width = p.width;

        canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
    } else {
        var canvas = document.createElement('canvas');
        if (!p.oImage) {
            canvas.oImage = new Image();
            canvas.oImage.src = p.src;
        } else {
            canvas.oImage = p.oImage;
        }

        canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);
        canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);

        var context = canvas.getContext('2d');
        context.save();
        if (rotation <= Math.PI/2) {
            context.translate(sintheta*canvas.oImage.height,0);
        } else if (rotation <= Math.PI) {
            context.translate(canvas.width,-costheta*canvas.oImage.height);
        } else if (rotation <= 1.5*Math.PI) {
            context.translate(-costheta*canvas.oImage.width,canvas.height);
        } else {
            context.translate(0,-sintheta*canvas.oImage.width);
        }
        context.rotate(rotation);
        context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);
        context.restore();
    }
    canvas.id = p.id;
    canvas.onmousewheel = p.onmousewheel;
    canvas.angle = p.angle;
    p.parentNode.replaceChild(canvas, p);
},
    ------------------------------------------------------------
    在css样式中:
    #imgDiv{
            -ms-transform:rotate(90deg); /* IE 9 */
    }
    这样可以实现旋转,
    但我想使用js进行动态左右旋转,求大神们赐教!谢谢

2个回答

showbo
showbo   Ds   Rxr 2016.04.22 14:40
已采纳
devmiao
devmiao   Ds   Rxr 2016.04.22 14:35
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
CSS3图片旋转功能transform:rotate以及Canvas旋转示例
CSS3旋转图片 .demo { width: 100px; height: 75px; background-color: yellow; border: 1px solid black; margin:20px; }
CSS3--利用transform和transition属性制作扇形导航
在前面,我们已经讲解了transform这个属性以及案例,那么本文会进一步结合transform和transition两个属性,并制作一个简单的案例进行说明。 一、transition属性说明 接下来简单分析一下transition这个属性的定义以及子属性。      1)ansition-property  要运动的样式  (all || [attr] || none)      2)t
CSS3特效之转化(transform)和过渡(transition)
在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition)。有人可能会有疑问,CSS3动画不是只有animation一个属性吗?怎么又和转化(transform)和过渡(transition)扯上关系了,其实并非如此,转化(transform)属性让动画的变换多元化,而过渡(transition)属性是动画中的一种表现形式,也可以说成是动画一个版
JS利用CSS3 transform rotate 实现旋转转盘或背景(大转盘抽奖)
最近需要做一个旋转转盘抽奖的小组件,初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘的偏转角度值,来达到转动效果。 使元素围绕中心根据角度偏转,在元素的transform属性中可以这样写: transform:rotate(30deg);//偏转30度 -moz-transform:rotate(30deg);//兼
CSS3 transform3D 图片翻转效果
经常能在展示案例logo的时候见到。logo原本是黑白色,鼠标移入时logo翻转成为彩色。一、实现一张图片的翻转一、HTML结构<div class="stage"> <div class="flipBox"> <figure class="pic front">Front</figure> <figure class="pic back">Back</fig
CSS3 transform旋转属性
目前越来越多的浏览器兼容CSS3标准了,CSS3里有一个使对象旋转的属性transform rotate,号称兼容CSS3的浏览器对它的支持也不算好,好在Firefox、Webkit和Opera这些浏览器都已经提供了官方的hack去支持这个属性。唯独在IE浏览器里对这个transform属性无法通过一般的CSS写法去实现。 在W3C官方的标准里,通过transform属性使对象旋转的写法如下
CSS3的transform属性实现旋转正方体
代码如下: Document 1 2 3 4 5 6 ul{ position:relative; height:300px; width:300px; list-style:none; margin:100px auto; transfor
CSS3绘制三角形,并实现翻转效果
首先,如何用CSS3来绘制三角形,下面介绍了四种朝向三角形的写法: CSS样式设计: .triangle { width:0; height:0; overflow:hidden; /*朝上的三角形*/ border-left:6px solid transparent; border-right:6px solid transparent; border
css3使用transform属性制作js弹性运动
css3使用transform属性制作js弹性运动,其实做这个效果和js的原理一样:就是控制位置和时间,但是不同的是css用transform的translate来控制,其实现的最终一把手是transition。
20161208 JS计时器和CSS3旋转属性闹钟
谷歌控制盒子旋转 盒子.style.WebkitTransform = "rotate(180deg)" 例子:时钟     时间表                                          var clock =document.getElementById("clock");     var z =document.get