我想点击document让p的图片从中心点向两边展开一张图片的大小
用了css3的缩放，但是他会把图片弄失真，问下用css3能否实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width:1px;
background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
background-size:cover;
height:600px;
margin:100px auto;
-webkit-transform-origin:left top;
-moz-transform-origin:left top;
-o-transform-origin:left top;
-ms-transform-origin:left top;
transform-origin:left top;
-webkit-transition:1s;
-moz-transition:1s;
-o-transition:1s;
}
</style>
</head>
<body>
<p class="outter"></p>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function() {
$(document).on('click',function(){
$('p').css({
'-webkit-transform':'scaleX(800)',
'transform':'scaleX(800)'
})
})
});
</script>
</body>
</html>
阿神2017-04-17 11:35:07
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
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;
}
</style>
</head>
<body>
<p class="outter"></p>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function() {
$(document).on('click',function(){
$('p').stop(true).animate({
width: 800,
height: 600
})
})
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
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;
}
</style>
</head>
<body>
<p class="outter"></p>
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script>
$(function() {
$(document).on('click',function(){
$('p').css({
"transform": "scale(1)"
})
})
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.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);
}
</style>
</head>
<body>
<p class="outter">
<p class="inner"></p>
</p>
</body>
</html>
高洛峰2017-04-17 11:35:07
Your picture is a bitmap, and it will definitely be distorted when enlarged. You need to use a vector image. You can also achieve this with css3, but you need to use a higher version of the browser. But the picture will still be distorted.
黄舟2017-04-17 11:35:07
You will definitely get distortion if you only zoom in by x. . If it’s blurry, you need to use vector