html - Rotating the view within an image, not the image itself? -

html - Rotating the view within an image, not the image itself? -

i've been trying recreate banner www.reddit.com/r/atheism no luck

so far i'm here (fiddle show: 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 { { -ms-transform: rotate(0deg); } { -ms-transform: rotate(360deg); }} @-moz-keyframes rotate { { -moz-transform: rotate(0deg); } { -moz-transform: rotate(360deg); }} @-webkit-keyframes rotate { { -webkit-transform: rotate(0deg); } { -webkit-transform: rotate(360deg); }}

but right it's banner moving, not 'view'.. know how maintain in place , rotate within image?

you can't rotate 'view' of image, image itself. desired effect need container crop rotating image.

the html

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

the css container

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

the fiddle

html css transform