javascript - zoom 放大背景图怎么是从页面左上角开始放大的？

Question

别的浏览器用css3实现了效果：

<code>    .section-photo{
        overflow:hidden;
        position: relative;
        height:529px;
        // *zoom:1;
        &:hover{
          .cultural-banner{
                 -webkit-transform: scale(1.1, 1.1);
                -ms-transform: scale(1.1, 1.1);
                    transform: scale(1.1, 1.1);
                    -webkit-transition: all 8s;
                            transition: all 8s;
          }
        }
        .cultural-banner{
                 -webkit-transform: scale(.8,.8);
                -ms-transform: scale(.8,.8);
                    transform: scale(.8,.8);
                    -webkit-transition: all 5s;
                            transition: all 5s;
        }
    }
    .cultural-banner{
   background:transparent url(../imgs/hpd_025.png) center center repeat;
   padding:117px 0 157px 0;
   margin-bottom: 60px;
   height:469px;
}
</code>

demo：http://codepen.io/marklow/pen/WxpYod

<code>
js--兼容ie的代码：
   $('#cultural-banner').hover(function(){
        $(this).animate({
          zoom: 1.1
          },
          'jswing');
    },function(){
      $(this).animate({
          zoom:.8
          },
          'jswing');
    })</code>

为什么放大背景图片是从元素的左上角开始放大的？？

Answer 1

这个如果想从中心放大，就需要模拟了，通过改变宽高同时改变它的位置，让它在视觉上看起来是从中心放大的

Answer 2

css中添加
transform-origin: right top;