变形实例

最新推荐文章于 2021-11-25 10:19:39 发布

原创最新推荐文章于 2021-11-25 10:19:39 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#变形效果

本文介绍了一种使用CSS实现图片变换的方法，包括平移、缩放、倾斜和旋转等效果，并通过过渡属性使这些变化更加平滑。文章还提供了一个示例代码，展示了如何在一个div容器中设置图片的变换及hover状态下的放大效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            border: 1px solid red;
            width: 158px;
            height: 183px;
            overflow: hidden;
        }
        img{
            /*/!*translate/translateX/translateY:在水平、垂直或者两个方向上平移元素*!/
            transform: translate(500px,100px);
            /!*scale/scaleX/scaleY:在水平、垂直或者两个方向上缩放元素*!/
            transform: scale(1.5);
            /!*skew/skewX/skewY:倾斜一定角度*!/
            transform: skew(20deg);
            /!*旋转元素*!/
            transform: rotate(90deg);*/

            /*过渡效果：指定元素  过渡时间  过渡方式  过渡开始的延迟时间*/
            transition: all 1.2s ease 0s;

        }

        img:hover{
            /*transform: rotateY(180deg);*/
            transform: scale(1.8);

        }
    </style>

</head>
<body>
<div>
    <img src="../img/f3_Android1.png" alt="/">
</div>

</body>
</html>