在 CSS 中围绕中心旋转图像？答案

【问题标题】：Rotating an image about center in CSS?在 CSS 中围绕中心旋转图像？
【发布时间】：2020-05-19 23:07:59
【问题描述】：

我有以下 HTML 代码：

<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class = "container-fluid">
            <div class = "container">
                <img class = "image img-fluid" src = "advertisement.png">
                <img class = "image img-fluid reset" src = "blue.png">
                <img class = "image img-fluid reset" src = "green.png">
                <img class = "image img-fluid reset" src = "brown.png">
                <img class = "image img-fluid reset" src = "red.png">
        </div>
        </div>
    </body>
</html>

style.css 在哪里：

.container {
    position: relative;
}

.image {
    position: absolute;
    width: 840px;
    height: 600px;
}

.reset{
    transform: rotate(180deg);
    transform-origin: center;
}

在为每个蓝色、绿色、棕色和红色图像添加重置类之前，我有这样的事情：

请注意，单个 m&ms 图像只是 m&m 本身的大小，即它们不是巨大的，具有不可见的背景。

现在，我的问题是，当我尝试添加 180 度旋转，而不是围绕其中心旋转时，m&ms 会执行以下操作：

为什么会这样，我该如何解决？

【问题讨论】：

你能用 sn-p 或 fiddle 复制它吗？
因为你使.image 比它应该的大。不知道你是怎么剪掉图片的，但是看起来你只是直接从原始图片中剪掉了m&m，并留下了很多透明的空间。
我认为问题出在position absolute，因为它在您使用absolute 而不定义top left right 时会干扰旋转
您可以使用任何网站，例如 codepen 或沙箱，并将您的 sn-p 与资产一起上传到那里，以便我可以查看它吗？
我认为 hao 是对的，如果我不能修复它，我会尝试将其发布到 codepen，谢谢大家！

标签： html css rotation transform image-rotation

【解决方案1】：

*您没有限制 div 的大小。

其实你根本不需要 div，你可以把类应用到图片上：*

.world
{
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
    display: block;
}
 
@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
@-keyframes spin1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}

&lt;img class="world" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png"/&gt;

【讨论】：