CSS的平面转换transform

1.作用

为元素添加动态效果，一般配合过渡(transition)使用。

2.用法

2.1 平移(translate属性)

<style>div {...宽高transition:all 1s;}div:hover {transform:translate(x轴，y轴);/*盒子以自身为参照物平移到XY的坐标位置，两轴方向可以取数字+px，也可以取百分比(参数自身尺寸的计算结果)*/}
</style>

2.2 旋转(rotate属性)

<style>div {...宽高transition:all 1s;}div:hover {/*旋转会改变坐标轴向*/transform-origin:right bottom;/*改变旋转中心点位置为右下角，默认情况下为盒子的原点*/transform:rotate(360deg);/*取正数顺时针旋转，复数反之，deg是角度单位*/}
</style>

2.3 缩放(scale属性)

<style>div {...宽高transition:all 1s;}div:hover {
/*通常缩放只设置一个值，表示X轴和Y轴等比例缩放，取值大于1表示放大，取值小于1表示缩小*/transform:scale(缩放倍数);}
</style>

2.4 倾斜(skew属性)

<style>div {...宽高transition:all 1s;}div:hover {transform:skew(30deg);/*正数向左倾斜，负数向右*/}
</style>