1‘、平移
p{
transform:translateX(10px);
}
p{
transform:translateY(10px);
}
p{
transform:translate(x,y);
}
正值向左上方平移,负值向右下方平移
2、缩放
p{
transform:scaleX(0.5)
}
p{
transform:scaleY(0.5)
}
取值范围0~1,超出则放大。负值为镜像
3、旋转
p{
transform:rotateX(10deg);
}
p{
transform:rotateY(10deg)
}
4、倾斜
p{
transform:skewX(10deg)
}
p{
transform:skewY(10deg)
}
拉伸旋转,不会超出高度
5、变换原点
p{
transform-origin:10%/10px/left/center/top;
}
6、过渡效果
transition-property 指定过渡的属性 all表示全部
transition-duration 指定过渡时间
transition-timing-function 指定过渡效果(ease溶解效果;linear渐变效果;ease-out淡出;ease-in淡入;ease-in-out淡入淡出效果)
transition-delay 指定过渡延迟
7、缩写
transition:all 过渡时间 过渡延迟