美文网首页
2D变形缩放效果

2D变形缩放效果

作者: 9979eb0cd854 | 来源:发表于2018-08-15 15:06 被阅读6次

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            section {
                width: 632px;
                height: 340px;
                margin: 100px auto;
                overflow: hidden;/*溢出隐藏*/
            }
            section img {/*谁做动画,谁加过渡*/
                transition: all 0.5s; 
            }
            section:hover img {/*鼠标经过section的时候,里面的img缩放*/
                transform: scale(1.2);
            }
        </style>
    </head>
    <body>
        
        <section>
            <img src="img/1.jpg" width="632" height="340" alt=""/>
        </section>
    </body>
</html>

效果:

image.png

相关文章

  • 2D变形缩放效果

    代码: 效果:

  • 6_动画_其他属性

    2D、3D变形动画 transform:2D变形:复合属性 通过 CSS3 转换,我们能够对元素进行移动、缩放、转...

  • CSS 2D转换transform

    2D转换——网页二维坐标系。转换transform可以实现元素的位移、旋转、缩放等效果。转换可以理解为变形。 tr...

  • CSS3转换的概念和实践

    Transform概念 元素在坐标系统中变形,属性包含变形函数,可以移动旋转和缩放元素 transform 2D转...

  • 2019-05-22 transform转换

    变形(transform)属性-2D 让元素在一个坐标系统中变形。这个属性可以移动、旋转和缩放元素。 transf...

  • CSS3的transform 转换

    transform是可以实现元素位移,旋转,缩放和变形。只介绍了2D转换~ translate 位移:改变元素位置...

  • CSS3之变形

    一、CSS3变形简介 CSS3变形是一些效果的集合,比如平移、旋转、缩放和倾斜效果,每个效果都称为变形函数(Tra...

  • CSS中2D,3D的转换

    通过CSS3转换,对元素进行移动,缩放,转动,拉长或拉伸。转换是使元素改变形状,尺寸和位置的一种效果。可以用2D,...

  • CSS变形与动画

    2019-04-15 2D变形 旋转效果: transform:rotate 扭曲效果: transform:sk...

  • CSS3 Transform——transform-origin

    关于css3变形 CSS3变形是一些效果的集合,比如平移、旋转、缩放和倾斜效果,每个效果都被称作为变形函数(Tra...

网友评论

      本文标题:2D变形缩放效果

      本文链接:https://www.haomeiwen.com/subject/wmhwbftx.html