如何使用css或javascript旋转图像

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

我想要的结果是

下面的解决方案是可行的，但是我想在没有悬停属性的情况下旋转我的图像，如果我在这里移除悬停，图像就不会旋转

<style>

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

#卡片img：悬停{
变换：旋转（360度）；
-webkit变换：旋转（180度）；
过渡时间：1.5s；
-webkit转换持续时间：1s；
}

---

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

使用CSS'

rotate

，

rotateX

，

rotateY

，

rotateZ

。小例子：

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

rotate

是2D变换方法，

rotateX

，

rotateY

，

rotateZ

是3D变换方法

参考资料：

---

我认为您看起来像是在执行以下代码，这是小提琴和 这可能对你有帮助

<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>

.形象{
位置：绝对位置；
最高：50%；
左：50%；
宽度：120px；
高度：120px；
裕度：-60px0-60px；
-webkit动画：旋转4s线性无限；
-moz动画：旋转4s线性无限；
动画：旋转4s线性无限；
}
@-moz关键帧旋转{100%{-moz变换：旋转（360度）；}
@-webkit关键帧旋转{100%{-webkit变换：旋转（360度）；}
@关键帧旋转{100%{-webkit变换：旋转（360度）；变换：旋转（360度）；}

看看这门课：

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（仅提供一个画布，用于旋转图像）：

---

事实上，使用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);

函数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（函数（）{
角度X+=incX；角度Y+=incY；角度Z+=incZ；
var angle=“rotateX（_X_deg）rotateY（_Y_deg）rotateZ（_Z_deg）”；
角度=角度。替换（“X”，angleX）。替换（“Y”，angleY）。替换（“Z”，angleZ）
$（“body”）.css（{“transform”：angle}）；
if（angleX0&&angleY>0&&angleZ>0）{
清除间隔（timerID）；
$（“body”）.css（{“transform”：“rotateX（0deg）rotateY（0deg）rotateZ（0deg）”）；
}
}, 10);
}
$（文档）.ready（bodyRotate）；

变换：旋转（度）

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

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);