CSS转换和旋转动画

Question

HTML

<div id="div1">
  <div id="div2">HELLO</div>
</div>


<div id="div3">
  <div id="div4">HELLO</div>
</div>

CSS

#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
-webkit-perspective:150px; /* Chrome, Safari, Opera  */
perspective:150px;
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;

-webkit-transform-origin:0%; /* Chrome, Safari, Opera */
-webkit-transform: rotateY(117deg); /* Chrome, Safari, Opera  */
transform: rotateX(-75deg);
}




#div3
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
-webkit-perspective:150px; /* Chrome, Safari, Opera  */
perspective:150px;
}

#div4
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;

-webkit-transform-origin:0%; /* Chrome, Safari, Opera */
-webkit-transform: rotateY(0deg); /* Chrome, Safari, Opera  */
transform: rotateX(-75deg);
}

尝试这样做会将内部div从起始位置旋转到最终位置，延迟为2

Two positions    

上面的代码是从Here获得的但是它不起作用。要做什么改变才能使它工作

-webkit-backface-visibility: visible;
-webkit-transform-origin: 0% 50%;

-webkit-transform: perspective(800px) rotateY(90deg) rotateY(-90deg);

Answer 1

此处： FIDDLE ：http://jsfiddle.net/9dqAK/12/

<强> HTML

<div id="stage">
  <div id="spinner">
      hello
  </div>
</div>

<强> CSS

@-webkit-keyframes spinner {
     from {
       -webkit-transform: rotateY(0deg);
       -moz-transform: rotateY(0deg);
     }
     to {
        -webkit-transform: rotateY(-360deg);
       -moz-transform: rotateY(-360deg);
    }
}

 #spinner {
     -webkit-transform-origin: 150px 0 0;
     -webkit-animation-name: spinner;
     -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-origin: 150px 0 0;
    -moz-animation-name: spinner;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 6s;
    -moz-transform-style: preserve-3d;
    padding:50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
 }
 #spinner:hover {
    -webkit-animation-play-state: paused;
  }

Answer 2

将-webkit-添加到您的上一个转换CSS声明

Answer 3

您忘记在时添加来制作动画。我假设它是hover。

因此，将结束样式添加到:hover伪类。并且，还指定一些过渡，以便您可以看到它的动画。

演示：http://jsfiddle.net/abhitalks/WEX75/4/

CSS ：

#div1 {
    position: relative;
    height: 150px;
    width: 150px;
    margin: 50px;
    padding:10px;
    border: 1px solid black;
    -webkit-perspective:150px;
}
#div2 {
    padding:50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    -webkit-transform-origin:0%;
    -webkit-transform: rotateY(117deg);
    transition: 1s all;
}
#div1:hover > #div2 {
    -webkit-backface-visibility: visible;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: perspective(500px) rotateY(0deg);
}

编辑 :(在阅读上述某处的Op评论后）

您希望动画在页面加载时发生。因此，在这种情况下，只需使用jQuery应用相关的CSS。在domready中包装该代码。

演示2：http://jsfiddle.net/abhitalks/WEX75/3/

JS ：

$("#div2").css({
    '-webkit-backface-visibility': 'visible',
    '-webkit-transform-origin': '50% 50%',
    '-webkit-transform': 'perspective(500px) rotateY(0deg)'    
});

编辑2：

使用transition-delay: 2s;可以引入2秒的延迟。

演示3：http://jsfiddle.net/abhitalks/WEX75/5/