页面上图像的CSS居中和旋转答案

【问题标题】：CSS centering and rotating of image on page页面上图像的CSS居中和旋转
【发布时间】：2015-04-27 08:36:05
【问题描述】：

我想做的是在页面上居中放置图像，其中图像比视口大几倍。图像的中心必须与当前视点的中心完美对齐（具有动态、不同大小的图像和视口）。然后，使用 CSS 动画，我必须为图像设置动画以进行旋转。我们还假设解决方案不能使用 jQuery 或 Javascript，并且溢出是隐藏的。

解决方案必须避免使用 CSS transform() 和 translate()，因为它们会混淆关键帧动画和页面上的其他样式。我也不拥有这个特定站点，因此外部库、添加样式表和修改 <html> 和 <body> 都受到限制。

注意：有代码，但不贴，因为全错了。

【问题讨论】：

如果您阅读说明，我将不会发布代码。我尝试了许多不同的方法（谷歌的前 6 页，许多搜索词）。他们都没有工作。
投反对票的人，请解释投票的原因。

标签： html css css-position css-animations centering

【解决方案1】：

对于居中和旋转：演示：http://jsfiddle.net/LWrSD/277/

CSS：

html, body {
    width:100%;
    height:100%;
}
div.horizontal {
    display: flex;
    justify-content: center;
}
div.vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
div.div {
    background-color: #fcf;
    width: 100%;
    height: 100%;
}
img {
    width: 100px;
    height: 100px;
    -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);
    }
}

HTML：

<div class="horizontal div">
    <div class="vertical">
        <img src="http://www.lorempixel.com/600/200/sports/1/" />
    </div>
</div>

【讨论】：

我真的认为这将是解决方案。问题：当尺寸超过视口尺寸时，图像需要正常工作（居中）。试图让它工作，但仍然没有雪茄。 Closest one yet though!
我无法理解您的要求。即使图像超出视口，居中和旋转仍然有效。我错过了什么吗？演示：jsfiddle.net/LWrSD/278

【解决方案2】：

如果要居中，请使用 CSS 变换：

例子：

img{
    position:relative;
    left:50%;
    transform:translate(-50%);}

对于旋转也使用变换：示例：

img{
    position:relative;
    left:50%;
    transform:translate(-50%);
    transform: rotate(7deg);
}

动画效果需要使用jQuery addClass。之后你只需要添加transition: all 1s; CSS 样式，其中 1s 是动画更改时间。

【讨论】：

请仔细阅读问题。正如在@AlessanderFranca 的答案的cmets 中看到的那样，translate()s 和transform()s 是不允许的，并且根据原始问题，jQuery 也是不可能的。
哪里说不允许转换？
您回复的评论说出了答案。 @AlessanderFranca 的回答不正确，我澄清说 translate() 和 transform() 是不可能的，因为它们与我正在处理的页面上的其他代码混淆了。基本上，他们搞砸了动画关键帧。该评论已被删除（不是我）。

【解决方案3】：

先把div的css设置成这段代码：

div {
width:980px;
margin: auto;
position:relative;
}

接下来为 img 设置 css：例如：

img { 
display:block;
width:80px;
height:80px;
}

【讨论】：

正如问题所述，图像应该大于比视口，而不是更小，这是您的解决方案失败的地方。此外，所有维度都需要是动态的。