CSS3图片旋转功能transform:rotate以及Canvas旋转示例

最新推荐文章于 2025-10-26 14:34:27 发布

原创最新推荐文章于 2025-10-26 14:34:27 发布 · 8.1k 阅读

2 ·

CC 4.0 BY-SA版权

HTML & CSS 专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨了CSS3的transform:rotate属性和Canvas API中的旋转操作，通过实例展示了如何实现图片的动态旋转效果，帮助开发者更好地理解和应用这两种技术。

<!DOCTYPE html>
<html>
<head>
    <title>CSS3旋转图片</title>
    <style>
        .demo {
            width: 100px;
            height: 75px;
            background-color: yellow;
            border: 1px solid black;
            margin:20px;
        }

        #div2 {
            transform: rotate(30deg);
            -ms-transform: rotate(30deg); /* IE 9 */
            -moz-transform: rotate(30deg); /* Firefox */
            -webkit-transform: rotate(30deg); /* Safari and Chrome */
            -o-transform: rotate(30deg); /* Opera */
        }

        #div3 {
            transform: rotate(90deg);
            -ms-transform: rotate(90deg); /* IE 9 */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(90deg); /* Safari and Chrome */
            -o-transform: rotate(90deg); /* Opera */
        }
    </style>
</head>
<body>
    <div class="demo" id="div1">你好。这是一个 div 元素。</div>
    <div style="clear:both"></div>
    <div class="demo" id="div2">你好。这是一个 div 元素。</div>
    <div style="clear:both"></div>
    <div class="demo" id="div3">你好。这是一个 div 元素。</div>
    原图<img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style="width:200px;">
    90°旋转后的图片
    <img src="http://www.baidu.com/img/bd_logo1.png" alt="Flowers" style='width:200px;transform:rotate(90deg)'>
</body>
</html>

<canvas id="canvasId" width="400" height="400"></canvas>
<script type="text/javascript">
    //canvas旋转图片
    var canvas = document.getElementById("canvasId");
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.src = "http://avatar.youkuaiyun.com/5/6/7/1_jslang.jpg";
    img.onload = function () {
        ctx.save();//保存状态
        ctx.translate(200, 200);//设置画布上的(0,0)位置，也就是旋转的中心点
        ctx.rotate(45 * Math.PI / 180);
        ctx.drawImage(img, -img.width / 2, -img.height / 2);//把图片绘制在旋转的中心点，
        ctx.restore();//恢复状态
    }
</script>

<body>
    <button onclick="rotateImg('testImg', 'left')">向左旋转</button>
    <button onclick="rotateImg('testImg', 'right')">向右旋转</button><br />
    <img src="http://www.imqing.com/demo/rotateImg.jpg" id="testImg" />
    <script>
        /*
            原理：利用canvas对象来旋转。
            实现方式：首先创建一个canvas元素，然后把img元素绘入canvas。
            但是，实际上，这是默认情况，就是图片没旋转时。
            如果图片要旋转90度的话，就需要先把canvas画布旋转90度后再绘图。
            描述如下： （内部旋转原理是这样的，图片的坐标是从左上角开始计算，
            向右为x正方向，向下为y正方向，在旋转画布canvas时，实际上是这个坐标在旋转    
            
            解释：   canvas.width与height就不用解释了吧，应该。rotate应该也不用吧？关键是
            drawImage(img, x, y);
            其中的x，y是指从哪一点开始画，因为整个坐标系统旋转了，所以，x，y不一样，
            比如step=1，图片向右旋转了90度，即坐标系旋转了90度，那么起始位置应该是
            x = 0,   y=  img.height 其它类似可得。
        */
        function rotateImg(pid, direction) {
            //最小与最大旋转方向，图片旋转4次后回到原方向
            var min_step = 0;
            var max_step = 3;
            var img = document.getElementById(pid);
            if (img == null) return;
            //img的高度和宽度不能在img元素隐藏后获取，否则会出错
            var height = img.height;
            var width = img.width;
            var step = img.getAttribute('step');
            if (step == null) {
                step = min_step;
            }
            if (direction == 'right') {
                step++;
                //旋转到原位置，即超过最大值
                step > max_step && (step = min_step);
            } else {
                step--;
                step < min_step && (step = max_step);
            }
            img.setAttribute('step', step);
            var canvas = document.getElementById('pic_' + pid);
            if (canvas == null) {
                img.style.display = 'none';
                canvas = document.createElement('canvas');
                canvas.setAttribute('id', 'pic_' + pid);
                img.parentNode.appendChild(canvas);
            }
            //旋转角度以弧度值为参数
            var degree = step * 90 * Math.PI / 180;
            var ctx = canvas.getContext('2d');
            switch (step) {
                case 0:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.drawImage(img, 0, 0);
                    break;
                case 1:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, 0, -height);
                    break;
                case 2:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, -height);
                    break;
                case 3:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, 0);
                    break;
            }
        }
    </script>
</body>