CSS centering and rotating of image on page

Question

What I would like to do is center an image on a page, where the image is several times larger than the viewport. The image's center must align perfectly with the center of the current viewpoint (with dynamic, different-sized images and viewports). Then, using CSS animations, I must animate the image to rotate. Let's also assume that the solution cannot use jQuery or Javascript, and the overflow is hidden.

The solution must avoid using CSS transform() and translate(), since they mess up the keyframe animations, and other styles on the page. I also do not own this particular site, so external libraries, adding stylesheets, and modifying <html> and <body> are restricted.

Note: Have code, but not posting it because it's all wrong.

If you'll read the note, I will not be posting code. I tried many many different approaches (first 6 pages from Google, many search terms). None of them worked. — andrewgu, Feb 25 '15 at 11:25

score 1 · Answer 1 · answered Feb 25 '15 at 11:29

For centering and rotating: Demo: 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>

I really thought that this would be the solution. Issues: Image needs to work (centered) when size exceeds viewport dimensions. Tried to get it working, but still no cigar. [Closest one yet though](http://jsfiddle.net/mfdsjxft/2/)! — andrewgu, Feb 25 '15 at 11:39
I could not understand your requirement. Even if the image exceeds the viewport, centering still works and rotation too. Am I missing something? Demo : http://jsfiddle.net/LWrSD/278/ — K K, Feb 25 '15 at 11:52

score -1 · Answer 2 · answered Feb 25 '15 at 11:25

-1

If you want to center it, use CSS Transform:

Example:

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

For rotation also use transform: Example:

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

For animation effect you need to use jQuery addClass. After that you just need to add transition: all 1s; CSS styling where 1s is animation changing time.

answered Feb 25 '15 at 11:25

Andris

3,895
2
24
27

Please read the problem more carefully. As seen in the comments to @AlessanderFranca 's answer, `translate()`s and `transform()`s aren't allowed, and jQuery is also out of the question, as per the original question. – andrewgu Feb 25 '15 at 11:27
Where is said that transform isn't allowed? – Andris Feb 25 '15 at 11:30
The comment you were replying to said the answer. @AlessanderFranca 's answer was incorrect, and I clarified that `translate()` and `transform()` were out of the question, since they mess with other code on the page I'm working on. Basically, they screw with the animation keyframes. The comment has since been deleted (not by me). – andrewgu Feb 25 '15 at 11:42

score -1 · Answer 3 · answered Feb 25 '15 at 11:26

-1

First set the css of div to this code:

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

next set the css for the img: for example:

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

answered Feb 25 '15 at 11:26

Soma Moradi

125
1
1
9

As the question stated, the image is supposed to be *larger* than the viewport, not smaller, which is where your solution fails. Also the dimensions all need to be dynamic. – andrewgu Feb 25 '15 at 11:30

CSS centering and rotating of image on page

3 Answers3