Тема: transform animate
Показать сообщение отдельно
  #1 (permalink)  
Старый 02.02.2014, 15:00
Профессор
Посмотреть профиль Найти все сообщения от imediasun1
 
Регистрация: 23.12.2012
Сообщений: 437

transform animate
Здравствуйте я могу произвести поворот вокруг своей оси на 90 градусов следующим образом
$('.container').animate({ opacity: 0.25, borderSpacing: 90 }, {

    step: function(now,fx) {
      $(this).css('-webkit-transform','perspective(900px) rotateY('+now+'deg)');
      $(this).css('-moz-transform','perspective(900px) rotateY('+now+'deg)'); 
      $(this).css('-ms-transform','perspective(900px) rotateY('+now+'deg)');
      $(this).css('-o-transform','perspective(900px) rotateY('+now+'deg)');
      $(this).css('transform','perspective(900px) rotateY('+now+'deg)');  
    },
    duration:'slow'
},'linear')

Но как произвести поворот наоборот из невидимого положения в видимое, я попытался сделать вот так
.container2{
position:relative;
width:55%;
height:90%;
background:#eee;
z-index:0;
top:-130px;
margin:0 auto;
clear:both;
-webkit-transform: rotateY(90deg);
-moz-transform:rotateY(90deg); 
-ms-transform:rotateY(90deg);
-o-transform:rotateY(90deg);
transform:rotateY(90deg);
opacity:1; 
}

.queue(function() {
 $('.container2').animate({ opacity: 1, borderSpacing: 0 }, {

    step: function(now2,fx2) {
      $(this).css('-webkit-transform','perspective(900px) rotateY('+now2+'deg)');
      $(this).css('-moz-transform','perspective(900px) rotateY('+now2+'deg)'); 
      $(this).css('-ms-transform','perspective(900px) rotateY('+now2+'deg)');
      $(this).css('-o-transform','perspective(900px) rotateY('+now2+'deg)');
      $(this).css('transform','perspective(900px) rotateY('+now2+'deg)');  
    },
    duration:'slow'
},'linear')
.dequeue()})

Но не получилось, как же все таки произвести поворот из положения 90 градусов в 0

Последний раз редактировалось imediasun1, 02.02.2014 в 15:14.
Ответить с цитированием