2013-08-21 2 views
1

Привет всем пытается css3 перспективе она пришла в то время как окно загружаетсяCSS3 преобразование перспективы для сНа элемента на окно OnLoad

fiddle

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

мне нужно повернуть элемент DIV с помощью CSS3 проницательных во время загрузки окно или щелкните любой триггер, используя jquery.how, чтобы сделать это и как я делаю полный поворот там.

+0

Просто применять класс от нагрузки? – brbcoding

+0

Не то, чтобы это работало только в ie10. Нет более ранней версии. и вам нужно будет добавить -webkit & -moz префикс для этого, чтобы работать в Mozilla & Chrome. – MarsOne

+0

. Проверьте эту ссылку для хорошей демонстрации http://kevchapman.co.uk/css/webkit-css-perspective-demo/ – MarsOne

ответ

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

Keyframes Demo

Имейте в виду, что вам придется добавить какой префиксы вы поддерживаете.

1

Привет я изменил свой 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);} 
}