旋转
属性:transform:rotate(旋转角度)
角度的单位是deg。
- 取值为正,顺时针旋转
- 取值为负,逆时针旋转
默认情况下,旋转的原点是盒子中心点
改变旋转的原点可以使用属性:**transform-origin:**水平原点位置 垂直原点位置
取值:
- 方位名词(left,top,right,bottom,center)
- 像素单位数值
- 百分比
例如,要让图片绕右下角旋转
transfrom-origin: right bottom;
多重转换
多重转换技巧:先平移再转换
transfrom: translate() rotate();
.luntai {
margin: 30px auto;
width: 1100px;
height: 200px;
border: 3px solid #333;
}
img {
transition: all 4s;
width: 200px;
}
.luntai:hover img {
transform: translate(700px) rotate(360deg);
}


当鼠标移入盒子内,轮胎就会向右边滚动
缩放
写法:
transform:scale(缩放倍数);
transform: scale(X轴缩放倍数,y轴缩放倍数);
.box {
width: 200px;
height: 165.58px;
margin: 100px auto;
background-color: #333;
}
img {
width: 100%;
transition: all 1s;
}
img:hover {
transform: scale(2);
}

该方法是以中心为原点进行缩放,如果直接在hover里面改变图片的大小,则是以左上角为原点

倾斜
属性:transform:skew(xxdeg);
效果图:
