逆战停课不停学,今日份学习分享(2d位移,旋转,缩放)

今天学习了很多知识,主要的就是2d的位移,旋转,缩放,以下是今日份的笔记总结以及部分练习:

1,2D位移:
transform:translate(x,y);
transform:translateX(x轴移动的距离);
transform:translateY(Y轴移动的距离);
注:图片中的字块“2d”位移起初在大方块左侧,使用hover,使鼠标移入时出现x轴上的移动
逆战停课不停学,今日份学习分享(2d位移,旋转,缩放)逆战停课不停学,今日份学习分享(2d位移,旋转,缩放)
2,2D旋转:
transform:rotate(30deg);
transform:rotateX(30deg);
transform:rotateY(30deg);
逆战停课不停学,今日份学习分享(2d位移,旋转,缩放)
逆战停课不停学,今日份学习分享(2d位移,旋转,缩放)
3,2D缩放:
transform:scale(x,y);
x , y 这两个参数为一个数字,大于1放大 小于1缩小
transform:scaleX();
transform:scaleY();
逆战停课不停学,今日份学习分享(2d位移,旋转,缩放)
逆战停课不停学,今日份学习分享(2d位移,旋转,缩放)