html - 在图像中旋转 View ，而不是图像本身？

Question

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

到目前为止我在这里(显示 fiddle :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); }}

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

Answer 1

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

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