变形实例

最新推荐文章于 2020-04-16 18:50:32 发布

ztt0918

最新推荐文章于 2020-04-16 18:50:32 发布

阅读量198

点赞数

文章标签：变形效果

本文链接：https://blog.csdn.net/ztt0918/article/details/71908170

版权

<!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>

ztt0918

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
变形实例

html>html lang="en">head> meta charset="UTF-8"> title>title> style> div{ border: 1px solid red; width: 158px; height: 183px; overf
复制链接

扫一扫