0

我的路标 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% ;
}
4

2 回答 2

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);
}
于 2014-02-11T15:46:33.723 回答
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/

再次抱歉，沟通不畅，

鳍条

于 2014-02-11T16:40:50.067 回答