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