html - 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;
  }