h5c3提高---2D转换---8.9

2D转换

转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，可以简单理解为变形

• 移动：translate
• 旋转：rotate
• 缩放：scale

二维坐标系：2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

2D转换之移动 translate

2D移动可以改变元素在页面中的位置，类似定位。

transform：translate（X,Y）;
或者分开写
transform：translateX（n）;
transform：translateY（n）;

定义2D转换中的移动，沿着X和Y轴移动元素。优点：不会影响到其他元素的位置。translate里面的参数是%是相对于盒子自身的宽度或高度移动的：translate：(50%，50%)；translate对于行内标签没有效果。

2D转换之旋转 rotate

2D旋转是让元素在2维平面内顺时针旋转或者逆时针旋转。

transform: rotate(360deg);

rotate里面跟度数，单位是deg。角度为正时是顺时针，负时是逆时针。默认旋转的中心点是元素的中心点  transform-origin：(50%  50%)；。

2D转换中心点transform-origin：我们可以设置元素转换的中心点

transform-origin:x y;
/*参数 × 和 y 用空格隔开 */
/* 还可以给 x y设置 像素 或者 方位名词  
  (top bottom left right center)*/
 /* transform-origin: left bottom; */
    transform-origin: 50px 50px;

2D转换之缩放 scale

transform:scale(x,y);
/*注意其中的x和y用逗号分隔*/
/*transform：scale(1，1)；宽和高都放大一倍，相对于没有放大
transform：scale(2，2)；宽和高都放大了2倍
transform：scale(2)；只写一个参数，第二个参数则和第一个参数一样，相当于scale(2，2)；
transform：scale(0.5，0.5); 缩小*/

sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

2D转换综合写法

1.同时使用多个转换，其格式为：transform：translate() rotate() scale()；等
2.其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前

---

---

---

2D转换总结

• 转换transform我们简单理解就是变形有2D和3D之分
• 我们暂且学三个分别是位移、旋转、缩放
• 2D移动translate(x，y)最大的优势是不影响其他盒子，参数%是相对于自身宽度和高度来计算
• 可以分开写，比如translateX(x)和translateY(y)
• 2D旋转rotate(度)可以实现旋转元素度数的，单位是deg
• 2D缩放sacle(x，y)里面参数是数字，不跟单位。可以是小数，最大的优势不影响其他盒子
• 设置转换中心点transform-origin：x  y；参数可以百分比、像素或者是方位名词
• 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前