旋转图像中的视图，而不是图像本身？答案

【问题标题】：Rotating the view within an image, not the image itself?旋转图像中的视图，而不是图像本身？
【发布时间】：2014-06-18 12:11:45
【问题描述】：

我一直在尝试从 www.reddit.com/r/atheism 重新创建横幅，但没有成功

到目前为止，我在这里（小提琴展示：http://jsfiddle.net/RBhyC/）：

#masthead {
background: url('http://d.thumbs.redditmedia.com/P622S0lrDyRKOFO3.png') no-repeat scroll 0% 0% #000;
margin-bottom: 5%;
padding: 1%;
text-align: center;
-webkit-animation:rotate 900s linear infinite;
-moz-animation:rotate 900s linear infinite;
animation:rotate 900s linear infinite;
}

@-ms-keyframes rotate { from { -ms-transform: rotate(0deg); } to { -ms-transform:       rotate(360deg); }}
@-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); }}
@-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }}

但现在只是横幅在移动，而不是“视图”。有谁知道如何将其保持在原位并仅在图像内旋转？

【问题讨论】：

你能做一个我们可以看到的jsfiddle吗？
完成！它现在也在主帖中：jsfiddle.net/RBhyC
不太确定您需要什么。但这jsfiddle.net/RBhyC/1 怎么样？
这正是我要找的！究竟是什么让它改变了？是不是图像不在横幅类中？

标签： html css transform

【解决方案1】：

您不能旋转图像的“视图”，只能旋转图像本身。
要获得所需的效果，您需要一个容器来裁剪旋转图像。

HTML

<div class="banner">
    <img class="image" src="http://d.thumbs.redditmedia.com/P622S0lrDyRKOFO3.png" alt="" width="1000" height="500">
</div>

容器的 CSS

.banner {
    position: relative;
    background: #000;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

Fiddle

【讨论】：

虽然这可行，但您仅限于 .banner div 的高度，下面的示例基本上是复制品，这将允许您将任何内容放入 .banner 并且它会适当调整大小

【解决方案2】：

试试这个，示例链接使用伪类 ::after 来应用样式，而不是图像元素本身，使用上述解决方案，您受限于横幅元素的大小，使用这个，横幅将适当调整大小到内容

<div id="somediv"><p>SOMETHING</p><p>another somethinbg</p></div>

<style>

    @-webkit-keyframes ROTATE{from{-webkit-transform:scale(1) rotate(0deg)}to{-webkit-transform:scale(1) rotate(360deg)}}@keyframes ROTATE{from{transform:scale(1) rotate(0deg)}to{transform:scale(1) rotate(360deg)}}

    #somediv * {position:relative;z-index:5;}

    #somediv {
        background: transparent;
        background-size: 250px 250px;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin-top: 0px!important;
        overflow: hidden;
        width:100%;
    }

    #somediv::after {
        content: "";
        color:#FFF;
        width: 2200px;
        height: 2200px;
        position:absolute;
        top: -1070px;
        left: -1100px;
        -webkit-animation-name: ROTATE;
        -webkit-animation-duration: 900s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-name: ROTATE;
        animation-duration: 900s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        background: #000 url("http://d.thumbs.redditmedia.com/P622S0lrDyRKOFO3.png") no-repeat;
    }
</style>

希望对你有帮助

【讨论】：