18 变形：平移，旋转，缩放

变形：平移，旋转，缩放

1.基础知识

变形就是通过css来改变元素的形状或位置

变形不好会影响页面的布局

transform用来设置元素的变形效果

0.平移

• translateX()沿X轴方向平移

• translateY()沿Y轴方向平移
• translateZ()沿Z轴方向平移

百分比是相对于自己位置计算的

几种水平垂直居中方式对比：

1.绝对定位：

.box3{
   
    background-color: orange;
    position: absolute;
    /* 
    这种居中方式，只适用于元素的大小确定*/
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;}

2.table-cell的方式

/* table-cell的方式具有一定局限性 */
display: table-cell;
vertical-align: middle;
text-align: center;

3.transform的方式：

/* transform变形平移的方式 */
position: absolute;
left: 50%;