千锋逆战204班第4周打卡

css3 transform的讲解和应用

在html中移动元素除了盒子模型的margin、padding，定位position，还有一中简单易懂的方法：transform属性。transform属性可以分为2d和3d，不过大家请放心3d只不过是比2d多了在Z轴上的变化而已。

2d效果

要了解transform属性先弄清坐标轴方向

这是二维坐标轴：Y轴为垂直方向，X轴为水平方向。

3d效果

这是三维坐标轴：Y轴为垂直方向，X轴为水平方向，Z轴为显示器向外垂直发射的方向。
若要将页面设置为3d效果，父级添加transform-style:preserve-3d;

transform属性

1. 位移
   transform：translate(X轴数值，Y轴数值，Z轴数值);
   若只想在水平或垂直的方向移动元素则可给元素添加
   transform:translateX(水平值)；或transform:translateY(垂直值)；
   在3d方向中Z轴的移动则为transform:translateZ(数值)；
   数值单位是px
2. 旋转
   transform：rotate（X轴数值deg，Y轴数值deg，Z轴数值deg);
   transform:rotateX(…deg);轴心在X轴上的旋转
   transform:rotateY(…deg);轴心在Y轴上的旋转
   transform:rotateZ(…deg);轴心在Z轴上的旋转
   旋转基点默认在元素的正中位置
   若改变基点则添加transform-origin:…px …px;
   数值单位是deg角度
3. 缩放
   transform:scale(X轴数值，Y轴数值，Z轴数值);
   transform:scaleX(数值);沿X轴缩放
   transform:scaleY(数值);沿Y轴缩放
   transform:scaleZ(数值);沿Z轴缩放
   数值为0~n
   0:缩小至不见
   0.n:缩小至原来的n倍
   1:原本模样
   n:放大至原来的n倍
4. 倾斜
   transform:skew(X轴数值，Y轴数值，Z轴数值);
   transform:skewX(数值);沿X轴倾斜
   transform:skewY(数值);沿Y轴倾斜
   transform:skewZ(数值);沿Z轴倾斜