【问题标题】：How Rotate image with css or javascript如何使用 css 或 javascript 旋转图像
【发布时间】：2016-03-29 12:39:19
【问题描述】：

我想知道是否有办法在不使用 fotoshop 的情况下旋转图像，我想使用 css 或 javascript

我要找的结果是here

以下解决方案有效，但我想在没有悬停属性的情况下旋转图像，如果我在此处删除悬停，图像不会旋转

<style>

#card img:hover {
transform: rotateY(360deg);
-webkit-transform: rotateY(180deg);
transition-duration: 1.5s;
-webkit-transition-duration:1s;
}
</style>

如果在这里找到我想要的效果here

【问题讨论】：

transform : rotate(DEGREE)
Go there if you want to chat about it

标签： javascript css rotation image-rotation

【解决方案1】：

使用 CSS 的 rotate、rotateX、rotateY、rotateZ。小例子：

img {
    transform: inherit;
    transition: all 0.3s;
    width: 100px;
}
img:hover {
    transform: rotateX(45deg)
                rotateY(45deg)
                rotateZ(45deg);
}

Fiddle

rotate 是 2D 变换方法，rotateX、rotateY、rotateZ 是 3D 变换方法。

W3Schools 参考资料：

【讨论】：

【解决方案2】：

img {
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

【讨论】：

【解决方案3】：

我认为您看起来像下面的代码，这是小提琴Link 和Other Link 这可能对你有帮助！

<img class="image" src="https://www.arxan.com/wp-content/uploads/assets1/images/demo.png" alt="" width="120" height="120">

<style>
.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>

【讨论】：

【解决方案4】：

看看这个类：

var ImgRotator = {
angle: parseInt(45),
image: {},
src: "",
canvasID: "",
intervalMS: parseInt(500),
jump: parseInt(5),
start_action: function (canvasID, imgSrc, interval, jumgAngle) {
    ImgRotator.jump = jumgAngle;
    ImgRotator.intervalMS = interval;
    ImgRotator.canvasID = canvasID;
    ImgRotator.src = imgSrc;
    var image = new Image();
    var canvas = document.getElementById(ImgRotator.canvasID);
    image.onload = function () {
        ImgRotator.image = image;
        canvas.height = canvas.width = Math.sqrt(image.width * image.width + image.height * image.height);
        window.setInterval(ImgRotator.keepRotating, ImgRotator.intervalMS);
        //theApp.keepRotating();
    };
    image.src = ImgRotator.src;
},
keepRotating: function () {
    ImgRotator.angle += ImgRotator.jump;
    var canvas = document.getElementById(ImgRotator.canvasID);
    var ctx = canvas.getContext("2d");
    ctx.save();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(ImgRotator.angle * Math.PI / 180);
    ctx.drawImage(ImgRotator.image, -ImgRotator.image.width / 2, -ImgRotator.image.height / 2);
    ctx.restore();
}

}

用法：

ImgRotator.start_action(canvasID, image_url, intervalInMilliseconds, jumgAngle);

HTML（只需提供要旋转图像的画布）：

<canvas id="canva" width="350" height="350"></canvas>

【讨论】：

【解决方案5】：

事实上使用 CSS 和 jquery 我们可以做得更好，我的意思是在加载时旋转整个身体

function bodyRotate() {
        var angleX = 0, angleY = 0, angleZ = 0;
        var incX = -1, incY = -1, incZ = -1;
        var xStop = -180, yStop = -180, zStop = -180;
        var timerID =
        window.setInterval(function () {
            angleX += incX; angleY += incY; angleZ += incZ;
            var angle = "rotateX(_X_deg) rotateY(_Y_deg) rotateZ(_Z_deg)";
            angle = angle.replace("_X_", angleX).replace("_Y_", angleY).replace("_Z_", angleZ)
            $("body").css({ "transform": angle });
            if (angleX < xStop && angleY < yStop && angleZ < zStop) {
                incX *= -1; incY *= -1; incZ *= -1;
            }
            if (angleX > 0 && angleY > 0 && angleZ > 0) {
                window.clearInterval(timerID);
                $("body").css({ "transform": "rotateX(0deg) rotateY(0deg) rotateZ(0deg)" });
            }
        }, 10);
    }
    $(document).ready(bodyRotate);

【讨论】：