旋转,扭曲,中心缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
            div{
                width: 400px;
                margin:100px auto;
            }

            img{
                transition:all .5s;
            }

            img:hover{
                /*transform: rotate(1080deg);
                transform: rotateX(1080deg);
                transform: rotateY(1080deg);*/

                /*transform: skew(90deg);
                transform: skew(90deg);
                transform: skewX(50deg);
                transform: skewY(50deg);*/


                transform: scale(1);
                transform: scale(2);
                transform: scale(-2);
                transform: scale(0);
                transform: scale(1.5);
                transform: scale(2);
            }

    </style>
</head>
<body>
    <!-- 
        transform  
            translate(X,Y)
            translateX()
            translateY()

            rotate()   旋转   deg
            rotateX()   旋转  deg
            rotateY()   旋转  deg

            skew        扭曲   deg
            skewX       扭曲   deg
            skewY       扭曲   deg

            scale(num)  中心缩放
                        num: ... -2, -1, 0 , 1, 2 ....   系数也可以为小数

     -->
    <div>
        <img src="a.jpg" alt="" width=400   >
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }

        div:hover{
            /*  缩放  向右向下缩放 值 > 0的正数, 小数  */
            zoom:0.5;

            /*  transform: scale()   中心缩放  值 可为 负数正数,小数 */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容