2D变形旋转变形将tranform属性的值设置为rotate(),即可实现旋转变形 transfrom:rotate(

旋转变形

将tranform属性的值设置为rotate(),即可实现旋转变形

transfrom:rotate(45deg)
若角度为正，则顺时针方向旋转，否则逆时针方向旋转。
transform-origin属性设置自定义变形的原点默认值为图片中心

         /* 0 0 为以图片左上角为中心旋转 */
            transform-origin:0 0;

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            border: 1px solid #000;
        }
        .pic1 {
            transform:rotate(30deg);
        }
        .pic2 {
            /* rotate中的值为正数顺时针旋转负数逆时针旋转 不要忘记deg */
            transform:rotate(60deg);
        }
        .pic3 {
            transform:rotate(90deg);
        }
        .pic4 {
            transform:rotate(180deg);
        }
        .pic5 {
            /* 0 0 为以图片左上角为中心旋转 */
            transform-origin:0 0;
            transform:rotate(30deg)
        }
    </style>
</head>
<body>
   <p><img src="abc.jpg.jpg" class="pic1"></p>
   <p><img src="abc.jpg.jpg" class="pic2"></p>
   <p><img src="abc.jpg.jpg" class="pic3"></p>
   <p><img src="abc.jpg.jpg" class="pic4"></p>
   <p><img src="abc.jpg.jpg" class="pic5"></p>
</body>
</html>

缩放变形

将transform属性的值设置为scale(),即可实现缩放变形

transform:scale(3);数字为缩放倍数，写一个值表示宽高缩放倍数相同，设置两个值时，第一个为宽缩放倍数，第二个为高缩放倍数； 当数值小于1 时，表示缩小元素；大于1时表示放大元素

也可以使用tranform-origin:设置缩放中心、

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            border: 1px solid #000;
        }
        .pic1 {
            transform:scale(1.2);
        }
        .pic2 {
            transform:scale(0.5);
        }
        .pic2:hover {
            transform:scale(1);
        }

    </style>
</head>
<body>
    <p><img src="abc.jpg.jpg" class="pic1"></p>
    <p><img src="abc.jpg.jpg" class="pic2"></p>
  
</body>
</html>

斜切变形

transform属性的值设置为skew(),即可实现斜切变形

transform:skew(10deg（X斜切角度）,20deg（Y斜切角度）);如果只书写一个值则为x斜切角度；

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            transform:skew(10deg,20deg);
        }
    </style>
</head>
<body>
    <img src="abc.jpg.jpg" alt="">
</body>
</html>

位移变形

transform属性的值设置为translate(), 即可实现位移变形(兼备到IE9)

transform:translate(100px,100px);

和相对定位非常像，位移变形也是“老家留坑”“形影分离”

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width:200px;
            height:200px;
            background-color:orange;
        }
        .box2 {
            width:200px;
            height:200px;
            background-color:rgb(51, 0, 255);
            /* 与相对定位相似 */
            transform:translate(100px,100px);
        }
        .box3 {
            width:200px;
            height:200px;
            background-color:rgb(0, 255, 94);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>