一. 前言

在实际开发中,我们会使用很多的方法,来满足不同的需求 ,平移、缩放、旋转也是我们经常会遇到的问题,下面就介绍一下如何使用它们,transform则为我们提供了几个对应的属性

二. 平移

• translateX() 沿着X轴方向平移
• translateY() 沿着Y轴方向平移
• translateZ() 沿着Z轴方向平移 暂不做演示
• translate() 简写 常用的有两个属性 第一个为X 第二个为Y

 .box {
        width: 200px;
        height: 200px;
        background-color: aqua;
        /* 此处的百分之五十是相对于自身计算的 */
        /* 其他轴同理,在此不做演示 */
        transform: translateX(50%);  
        transform: translateX(100px);
    }

结构展示:

效果展示:

三. 缩放

• scaleX() 沿着X轴方向缩放
• scaleY() 沿着Y轴方向缩放
• scale() 简写 一个属性 为XY同时缩放

 .box {
        width: 200px;
        height: 200px;
        background-color: aqua;
        /* transform: scaleX(.5); */
        /* transform: scaleY(.5); */
        transform: scale(.5);
    }

• 原图效果:

• X轴示例效果图:

• Y轴示例效果图:

• 双轴示例效果图:

四. 旋转

 .box {
       width: 200px;
       height: 200px;
       background-color: aqua;
   }

   .box:hover {
       /* 为整体旋转,参数意为° */
       transform: rotate(45deg);
       /* 可设置转点 左上 左下 右上 右下 不设为默认中心点*/
       transform-origin:left bottom;
   }

• 原图效果:

• 默认旋转效果:

• 左下旋转效果: