jquery - 窗口加载时 div 元素的 css3 变换透视图

Question

大家好，我正在尝试加载窗口时出现的 css3 透视图

小提琴

._red{
    background-color:#f00;
    display:block;
    width:100px;
    height:100px;
    transform: perspective( 600px ) rotateY( 45deg );
    }

我需要在加载窗口时使用 css3 perceptive 旋转 div 元素，或者使用 jquery.how 来单击任何触发器以及我如何在那里完全旋转。

Answer 1

jQuery方法：

// this will handle on load and the click event

$(function(){
   $el = $('._red');
    // apply the foo class on load
    $el.addClass('foo'); 
    // toggle a class on click
    $el.on('click', function(){
      $(this).toggleClass('bar');
    });
});

或者，您可以使用关键帧......但这不适用于点击事件，除非您想添加一个:target元素。

._red{
    background-color:#f00;
    display:block;
    width:100px;
    height:100px;
    transform: perspective( 600px ) rotateY( 45deg );
    -webkit-transform: perspective( 600px ) rotateY(45deg); 
    -webkit-animation: rotate 5s infinite;
}

@-webkit-keyframes rotate {
    to { -webkit-transform: rotateY(180deg); }
}

关键帧演示

请记住，您必须添加您支持的任何供应商前缀。

Answer 2

嗨，我改变了你的 jsFiddle

http://jsfiddle.net/CNg3t/16/

#me {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}