css3 webkit變換旋轉不起作用

Question

我的路標div顯示在DOM中（使用jquery追加後），但寬度和高度似乎不適用於webkit變換。如果我將轉換出來，我可以看到我的div。我的目的是要追加DIV，然後用旋轉從股利底部-90deg向0deg和一個支點來製作動畫

我的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

對不起缺乏信息，我對某些人重新考慮ason假設在css3中應用旋轉會爲我製作動畫，不知道從哪裏獲得了這個概念！

我找到了一份工作，將內置在flash中的問卷轉換爲CSS3/jQuery網站，因爲該公司希望在移動設備上提供他們的產品。我遇到的一件事是屏幕左下角的標誌旋轉動畫。我找到了一種方法來使用單獨的類來存儲動畫並在指示時添加它。

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); 
    } 
} 

這裏是原來的鏈接：

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

這裏是什麼，我已經建立了一個鏈接：

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

再次， 很抱歉的壞通信，

Finbar

Answer 2

@MrLister給解決方案，因爲自問題陳述：

...但寬度和高度似乎不適用於webkit轉換到位。如果我把變換出來，我可以看到我的div

你可能認爲你正在使用其他類型的變換。

一個目的旋轉90度的（Y或X）是不可見的：

Running 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> 

演示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); 
}