Как масштабировать и перемещать в одно и то же время?

Question

У меня есть следующий код, который масштабирует div на мыши, но в то же время я хочу переместить его на 10 пикселей вверх? Есть ли способ сделать это?

Благодаря

.ad{ 
    background: url(frame.jpg); 
    width: 980px; 
    height: 50px; 
    transition: all .4s ease-in-out; 
} 
$('.banner').on('mouseover', function() { 
    var val = 0.4; 
    $(".ad").css({ 
     '-webkit-transform': 'scale(' + val + ')', 
     '-moz-transform': 'scale(' + val + ')', 
     '-ms-transform': 'scale(' + val + ')', 
     '-o-transform': 'scale(' + val + ')', 
     'transform': 'scale(' + val + ')' 
    }); 
}); 

Answer 1

метод использования addClass из Jquery как:

В JavaScript

.ad{ 
     background: url(frame.jpg); 
     width: 980px; 
     height: 50px; 
     transition: all .4s ease-in-out; 
    } 
$('.banner').on('mouseover', function() { 
      var val = 0.4; 
      $(".ad").addClass("ad-fly"); 
     }); 

В CSS

.ad-fly{ 
    -webkit-transition-duration:1s; 
    -webkit-transform:scale(0.4) translateY(10px); 
} 

Answer 2

Добавить каждые преобразования в той же собственности, как:

'transform': 'scale(' + val + ') translateY(-10px);' 

(то же самое для поставщика приставочных свойств)

Answer 3

Он должен работать, если добавить еще один CSS заявление к вашей функции

$('.banner').on('mouseover', function() { 
       var val = 0.4; 
       $(".ad").css({ 
        '-webkit-transform': 'scale(' + val + ')', 
        '-moz-transform': 'scale(' + val + ')', 
        '-ms-transform': 'scale(' + val + ')', 
        '-o-transform': 'scale(' + val + ')', 
        'transform': 'scale(' + val + ')', 
        'margin-top': '-10px' 
       }); 
      }); 

Answer 4

ли это на чистом CSS: http://codepen.io/ArthyFiciel/pen/JYaYew

.ad:hover{ 
    transform: translate(0, -10px) scale(0.4); 
} 

В вашем случае:

.banner:hover .ad { /***/ }