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

两个职位

上面的代码是从这里得到的，但它不起作用。要进行哪些更改才能使其正常工作

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

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

Answer 1

这里：小提琴：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：

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

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