transform

1. 2D 转换

   • 2D 转换是改变标签在二维平面上的位置和形状

   • 移动： translate

   • 旋转： rotate
   • 缩放： scale

2. translate 语法

   • x 就是 x 轴上水平移动
   • y 就是 y 轴上水平移动

   transform: translate(x, y)
   transform: translateX(n)
   transfrom: translateY(n)

• translate 最大的优点就是不影响其他元素的位置
• translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
• 行内标签没有效果
• 

盒子居中

2D 转换 rotate

1. 重点知识点

2. • rotate 里面跟度数，单位是 deg
   • 角度为正时，顺时针，角度为负时，逆时针
   • 默认旋转的中心点是元素的中心点

3. 代码演示

   img:hover {
    transform: rotate(360deg)
   }

 img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 0.3s;
        }
        
        img:hover {
            transform: rotate(360deg);
        }