Question

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

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

我需要在加载窗口时使用css3 perceptive旋转div元素或单击any 使用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');
    });
});

或者，您可以使用关键帧...但这不适用于click事件，除非您想要添加: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); }
}

<强> Keyframes Demo

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

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

css3转换窗口onload上div元素的透视图

2 个答案: