鼠年全马铁人挑战 WEEK 17: CSS transform

transform:(动作的函数),通常会配合animation或:hover来做些动画效果

範例

transform-origin:x y;

指定动作的参考点座标(中心轴)，x y可以使用方未来指定
left、right、center、top、bottom，直接指定要在哪边开始

rotate(20deg)

以指定元素为参考点，旋转20度

skewX(20deg)

以指定元素为参考点，沿着横向倾斜20度

skewY(20deg)

以指定元素为参考点，沿着纵向倾斜20度

skew(20deg,45deg)

以指定元素为参考点，横向倾斜20度、纵向倾斜45度。参数如果只指定一个，则另一个会自动回0，也就是只会横向倾斜

scaleX(1.2)

指定的元素横向放大1.2倍，如果设定为0.9，则是横向缩小0.9倍

scaleY(1.2)

指定的元素纵向放大1.2倍，如果设定为0.9，则是纵向缩小0.9倍

scale(1.2,0.9)

指定元素横向放大1.2倍，纵向缩小0.9倍。如果只指定一个，则会自动跟第一个数据一样，等于是等比例缩放

translateX(10px)

指定元素横向移动10px的距离尺寸

translateY(10px)

指定元素纵向移动10px的距离

translate(p,p)

指定元素横向移动10px，纵向移动10px，结合X和Y轴的部分。如果只指定一个，另一个则自动为0，就是只会横向移动