jquery - css3 webkit 变换旋转不工作

Question

我的路标 div 显示在 DOM 中(在使用 jquery 附加后)，但宽度和高度似乎不适用于 webkit 转换。如果我取出转换，我可以看到我的 div。我的目标是附加 div，然后通过从 -90deg 到 0deg 的旋转和 div 底部的轴心点对其进行动画处理

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

@MrLister 给出了解决方案，因为既然问题是这样的:

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

您可能认为您正在使用其他类型的转换。

旋转(Y 或 X)90 度的对象不可见:

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