文章/答案/技术大牛

发布

社区首页 >问答首页 >css3 webkit变换旋转不工作

问css3 webkit变换旋转不工作
EN

Stack Overflow用户

提问于 2014-02-11 14:16:40

回答 1查看 3.6K关注 0票数 0

我的路标div显示在DOM中(在添加jquery之后)，但是宽度和高度似乎与webkit转换不兼容。如果我把变换取出来，我就能看到我的div了。我的目标是附加div，然后将其从-90 0deg旋转到0 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% ;
}

jquery

css

transform

rotatetransform

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-02-11 16:40:50

对不起，由于缺乏信息，我出于某种原因，假设在css3中应用旋转会使我动画片，不知道这个概念是从哪里来的！

我找到了一份工作，将flash中内置的问题转换为CSS3 3/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/

再一次，抱歉沟通不好，

芬巴

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21704331

复制

相似问题

问css3 webkit变换旋转不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css3 webkit变换旋转不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css3 webkit变换旋转不工作
EN