基本语法:transform:scale(参数);
对元素进行水平或垂直方向的缩放
scale(参数):沿着x轴y轴放大缩小n倍
scale(参数1,参数2);沿着水平放大缩小x倍,沿着垂直方向放大缩小y倍
scaleX(参数):沿着水平放大缩小x倍
scaleX(参数):沿着垂直方向放大缩小y倍
案例:
<style>
div{
height: 500px;
width: 500px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
img{
transition: all 2s;
}
div:hover img{
transform: scale(1.5);
}
</style>
</head>
<body>
<div>
<img src="../image/01.jpg" alt="">
</div>
</body>
旋转基本语法:transform:routate()
对元素进行旋转,取值使用度数(deg),正值为顺时针,负值为逆时针。
rotate(参数):围绕元素的正中心进行旋转
rotateX(参数):围绕x轴进行旋转
rotateY(参数):围绕y轴进行旋转