变形

旋转变形
将transform属性的值设置为rotate(),即可实现旋转变形
transform:rotate(45deg)　
 
 
若角度为正，则顺时针，否则为逆时针。
 
<style>
        .pic1{
            transform: rotate(30deg);
        }
        .pic2{
            transform: rotate(60deg);
        }

        .pic3{
            transform: rotate(85deg);
        }
    </style>
</head>
<body>
    <p>
        <img src="300.jpg" alt="" class="pic1">
    </p>
    <p>
        <img src="300.jpg" alt="" class="pic2">
    </p>
    <p>
        <img src="300.jpg" alt="" class="pic3">
    </p>
</body>
照片旋转

 

缩放变形

将transform属性的值设置为scale( ),即可实现缩放变形，括号内填写数字代表缩放倍数。

transform:scale(3)　
缩放变形


斜切变形


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






transform:skew(10deg,20deg)　






 


 








            

            
posted @ 
2023-06-16 14:59 
陈永腾 
阅读(38) 
评论(0) 
 
收藏 
举报