Question

我一直试图从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); }}

但是现在它只是移动的横幅，而不是“视图”..有没有人知道如何将它保持在原位并且只在图像内旋转？

Answer 1

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

HTML

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

容器的

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

Fiddle

Answer 2

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

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

希望有所帮助

Ť

在图像中旋转视图，而不是图像本身？

2 个答案: