web前端CSS3练习——图片的伸缩

Komorebi_9999

于 2024-01-02 10:24:41 发布

阅读量400

点赞数 8

文章标签： css html css3

本文链接：https://blog.csdn.net/JLY19970726/article/details/135334761

版权

<!DOCTYPE html>
<html lang="en">
     <head>
        <meta charset="utf-8">
        <title>
      
        </title>
        <style>
            html{
            	/*设置景深*/
                perspective: 800px;
            }
          
           .box1:hover{
                /*对元素进行缩放的函数
                scaleX() 水平方向上的缩放
                scaleY()  垂直方向上的缩放
                scale()  双方向的缩放**/
          /*      transform:scale(2);*/
           }
            .img-wrapper{
                width: 200px;
                height: 200px;
                border:1px solid red;
                /*如果不写overflow:hidden，图片放大之后，父元素也会放大
                写上之后，父元素不会放大放大之后把多余的部分裁掉*/
                 overflow: hidden;
                 transform-origin:100px 100px;
            }
            img{
            	/*过渡时长为0.2s*/
                transition:.2s;
            }
            .img-wrapper:hover img{
                /*对图片进行一个放大*/
                transform:scale(1.2);
            }
        </style>
     </head>
     <body>
      
            <div class="img-wrapper">
                  <img src="./img/1.jpg" width="100%" height="100%" >
            </div>
      
           
     </body>
</html>