css3 scale 缩放图片问题

发布于
2016-02-29

我想点击document让div的图片从中心点向两边展开一张图片的大小
用了css3的缩放，但是他会把图片弄失真，问下用css3能否实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            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>
    <div class="outter"></div>
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <script>
        $(function() {
          $(document).on('click',function(){
              $('div').css({
                   '-webkit-transform':'scaleX(800)',
                'transform':'scaleX(800)'
              })
          })
        });
    </script>
</body>
</html>

css3 jquery

阅读 10.7k

3 个回答

super_newbie

方法一：js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        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;
        }
    </style>
</head>
<body>
    <div class="outter"></div>
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <script>
        $(function() {
          $(document).on('click',function(){
              $('div').stop(true).animate({
                  width: 800,
                  height: 600
              })
          })
        });
    </script>
</body>
</html>

方法二：scale

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        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;
        }
    </style>
</head>
<body>
    <div class="outter"></div>
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <script>
        $(function() {
          $(document).on('click',function(){
              $('div').css({
                  "transform": "scale(1)"
              })
          })
        });
    </script>
</body>
</html>

方法三：纯CSS

<!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>
    <div class="outter">
        <div class="inner"></div>
    </div>
</body>
</html>