rotate() 旋转函数

    • deg 度数
    • transform-origin 旋转的基点

    skew()倾斜函数

    • skewX()
    • skewY()

    scale()缩放函数 默认值是1

    • scaleX()
    • scaleY()

    translate() 位移函数

    • translateX()
    • translateY()
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
    9.     <style>
    10.        #div1{
    11.            width: 200px;
    12.            height: 300px;
    13.            border: 1px solid red;
    14.        }
    16.        #div1 img{
    17.            width:100%;
    18.            height: 100%;
    19.            transition: all 1s;
    20.        }
    22.        #div1:hover img{
    23.            transform: skew(-15deg,15deg);
    24.        }
    25.     </style>
    26. </head>
    27. <body>
    28.     <div id="div1">
    29.         <img src="./1991841492744344.jpg" alt="" srcset="">
    30.     </div>
    32. </body>
    33. </html>