Q:

Load css element already rotated

I'm trying to create an animation using CSS that will pop up and rotate when the page is loaded. The issue I'm having with is, I need the element to be rotated BEFORE the animation begins. 
JSFiddle: http://jsfiddle.net/4o1w01q5/
I can't tell if the issue is with this CSS snippet:
        .container {
            background:red;
            background-image: url(img/2012-04-12_14-06-35_758-1.jpg);
            background-position: center;
            background-repeat: no-repeat;
            padding:240px;
            padding-left: 300px;
            padding-right: 300px;
            padding-top:10px;
            -webkit-animation: logo-appear 0.6s, logo-rotate 1.6s;
            -moz-animation: logo-appear 0.6s, logo-rotate 1.6s;
            animation: logo-appear 0.6s, logo-rotate 1.6s;
        }

Or if there is a way to set the rotated positiong with jQuery. Any suggestions?
Edit: To clarify, what I'm trying to do is 

Have a div load, rotated 45 degrees
Pop the div (logo-appear)
Rotate the div 45 degrees down (logo-rotate)

Why do I want it like this? I want a diamond-shaped element load and the rotate it to make it a square.

A:

Figured it out. It was a matter of having the rotate happen along with the popping up sequence.
JSFiddle: http://jsfiddle.net/s8hae5dz/ with additional animation
Previous example:
@-webkit-keyframes logo-appear{                            
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
    }
    20% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
    }
    100% {    
        -webkit-transform: scale(1);
    }
}

Currently:
@-webkit-keyframes logo-appear{                            
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5) rotate(-45deg);
    }
    20% {
        opacity: 1;
        -webkit-transform: scale(1.2) rotate(-45deg);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1.2) rotate(-45deg);
    }
    100% {    
        -webkit-transform: scale(1) rotate(-45deg);
    }
}

