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给出了解决方案，因为问题是：

...但宽度和高度似乎不适用于webkit转换。如果我接受转换，我可以看到我的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);
}

Answer 2

很抱歉由于缺乏信息，我出于某种原因认为在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

css3 webkit转换旋转不起作用

2 个答案: