javascript 图片旋转,图片旋转html代码：代码示例

温馨提示：这篇文章已超过245天没有更新，请注意相关的内容是否还可用！

图片旋转是一种常见的网页交互效果，通过JavaScript可以实现对图片的旋转操作。要实现图片旋转，可以使用CSS3的transform属性来实现。我们需要获取到要旋转的图片元素，然后使用JavaScript来操作该元素的样式，将transform属性设置为旋转的角度。

示例代码如下：


<!DOCTYPE html>
<html>
<head>
<style>
    .rotate-img {
        transition: transform 0.5s ease-in-out;
    }
</style>
</head>
<body>
    <img id="myImage" class="9940-027a-9be0-be08 rotate-img" src="image.jpg" alt="Image">
    <button onclick="rotateImage()">旋转图片</button>
    <script>
        function rotateImage() {
            var img = document.getElementById("myImage");
            var currentRotation = getRotation(img);
            // 设置旋转角度为当前角度加上90度
            img.style.transform = "rotate(" + (currentRotation + 90) + "deg)";
        }
        function getRotation(element) {
            var st = window.getComputedStyle(element, null);
            var tr = st.getPropertyValue("transform");
            if (tr) {
                var values = tr.split('(')[1].split(')')[0].split(',');
                var a = values[0];
                var b = values[1];
                var c = values[2];
                var d = values[3];
                var scale = Math.sqrt(a*a + b*b);
                var sin = b/scale;
                var angle = Math.round(Math.asin(sin) * (180/Math.PI));
                return angle;
            }
            return 0;
        }
    </script>
</body>
</html>

在上述示例代码中，我们首先定义了一个带有class为"rotate-img"的CSS样式，该样式用于设置图片的过渡效果。然后，我们在页面中插入了一个图片元素和一个按钮。当点击按钮时，会调用`rotateImage()`函数。

在`rotateImage()`函数中，我们首先通过`document.getElementById()`方法获取到图片元素。然后，通过`getRotation()`函数获取到当前图片的旋转角度。接着，我们将图片的旋转角度设置为当前角度加上90度，通过修改`img.style.transform`属性来实现。

`getRotation()`函数用于获取元素的旋转角度。我们首先使用`window.getComputedStyle()`方法获取到元素的计算样式。然后，通过解析`transform`属性的值，计算出元素的旋转角度。

通过以上的代码，我们可以实现对图片的旋转操作。每次点击按钮，图片会顺时针旋转90度。你可以根据需要修改旋转角度和过渡效果的时间来实现不同的效果。