css3 webkit变换旋转不起作用答案

【问题标题】：css3 webkit transform rotate not workingcss3 webkit变换旋转不起作用
【发布时间】：2014-03-09 09:14:56
【问题描述】：

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

【问题讨论】：

为什么分号前有空格？
@JamesDonnelly 无论如何都很好.. -OP 在附加 jquery 之后我们可以看到你的 jQuery 吗？
@Mr.Alien 不会造成任何问题，只是一种奇怪的做法。
@JamesDonnelly 我们总是在这里看到奇怪的东西：D
而且不一致。有些分号确实有空格，有些则没有。与冒号后面的空格相同。无论如何，OP，你说动画，但我没有看到任何动画或过渡属性。另外，你知道带有 rotateY(90deg) 的元素是什么样子的吗？

标签： jquery css transform rotatetransform

【解决方案1】：

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

【讨论】：

@enyce12 添加到答案中，Nettuts+ Prefixr for win
@enyce12 未更新，或不再需要（可能是由于运行时前缀，如 Lea Verou 的 PrefixFree ）？这对我来说听起来很新鲜......
我的意思是在使用预处理器时不再需要。我正在使用 Sass，但它对我来说已经过时了（因为我使用波旁威士忌来做供应商前缀）。 Lea Verou 的 PrefixFree 是另一个不错的解决方案，但在您需要支持禁用的 JavaScript 的情况下它失败了。

【解决方案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/

再次，很抱歉沟通不好，

鳍条

【讨论】：