css3 webkit transform rotate not working

Question

My signpost div is showing up in the DOM (after being appending with jquery) but the width and height dont seem to work with the webkit transforms in place. if i take the transforms out i can see my div. my aim is to append the div and then animate it in with rotation coming from -90deg to 0deg and a pivot point at the bottom of the div

my css:

#signpost {
    background: url("../imgs/signpost.png");
    background-size:cover ;
    width:213px ;
    height:232px ;
    position:absolute;
    left:2em ;
    bottom:2em;
    z-index:999999 ;
    -webkit-transform:rotateY(-90deg);
    -webkit-transform-origin:80% 50% ;
}

Answer 1

Sorry for the lack of information, I for some reason assummed that applying rotate in css3 would animate for me, dont know where a got that notion from!

Ive got a job converting a questionaire built in flash to a CSS3/jQuery site because the company wants to make their product available on mobile. The one thing i was having trouble with is the rotating animation of the sign in the bottom left hand corner of the screen. I found a way to use a separate class to store the animation and add it when instructed.

jQuery

$("#signpost").animate({
    "left":48,
    "bottom":-16
});
$("#signpost").addClass("animaterotation");

CSS

#signpost {
    background: url("../imgs/signpost.png");
    background-size:cover ;
    width:213px ;
    height:232px ;
    position:absolute;
    left:-213px ;
    bottom:-4em ;
    z-index:999999 ;
    cursor:pointer ;
}
.animaterotation {
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.35s; 
    -webkit-animation-iteration-count:  1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
  from {
            transform-origin:0% 80%;
            -ms-transform-origin:0% 80%; /* IE 9 */
            -webkit-transform-origin:0% 80%; /* Safari and Chrome */

            transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
  }
  to { 
            transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
  }
}

here's a link to the original:

http://www.bigambition.co.uk/games/dream-job/

here's a link to what I've built:

http://scm.ulster.ac.uk/~B00595392/dreamjobs/

Again, Sorry for the bad communication,

Finbar

Answer 2

@MrLister gave the solution, because since the question states:

... but the width and height dont seem to work with the webkit transforms in place. if i take the transforms out i can see my div

you are probably thinking you are using some other kind of transform.

An object rotated (Y or X) of 90 degree is not visible:

Running demo

Demo HTML

<div class="notRotated">not rotated</div>
<div class="rotated30">rotated(Y) 30 deg </div>
<div class="rotated60">rotated(Y) 60 deg </div>
<div class="rotated80">rotated(Y) 80 deg </div>
<div class="rotated90">rotated(Y) 90 deg </div>

Demo CSS

div{
    background : blue;
        height : 50px;
         width : 200px;
        margin : 20px;
         color : white;
}    
.rotated30{
    transform : rotateY(30deg);
}
.rotated60{
    transform : rotateY(60deg);
}
.rotated80{
    transform : rotateY(80deg);
}
.rotated90{
    transform : rotateY(90deg);
}