html 图片使用scale,css3 scale 缩放图片问题

方法一：js

Document

div {

width:0;

height:0;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

transform-origin: 50% 50%;

background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);

background-size:cover;

}

$(function() {

$(document).on('click',function(){

$('div').stop(true).animate({

width: 800,

height: 600

})

})

});

方法二：scale

Document

div {

width: 800px;

height: 600px;

margin: 100px auto 0;

transform: scale(0);

transform-origin: 50% 50%;

transition: transform .4s ease-in-out;

background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);

background-size:cover;

}

$(function() {

$(document).on('click',function(){

$('div').css({

"transform": "scale(1)"

})

})

});

方法三：纯CSS

Document

.outter {

width: 800px;

height: 600px;

margin: 100px auto 0;

background-color: gray;

}

.inner {

width: 800px;

height: 600px;

transform: scale(0);

transform-origin: 50% 50%;

transition: transform .4s ease-in-out;

background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);

background-size:cover;

}

.outter:hover .inner {

transform: scale(1);

}