CSS3的2D转换

JJ_Smilewang

已于 2022-04-12 16:29:34 修改

阅读量891

点赞数 4

分类专栏： html5和CSS3提高文章标签： css3 html5 前端

于 2022-04-12 14:37:46 首次发布

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124116118

版权

html5和CSS3提高专栏收录该内容

5 篇文章 0 订阅

订阅专栏

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

转换（transform）你可以简单理解为变形。

在学习2D转换之前，我们需要先了解vscode中的二维坐标系，它和我们数学中的坐标系稍微有点不一样，它是向右为x轴正方向，向下为y轴正方向，如下图所示：

1.2D位移 translate

所谓的2d位移就是可以通过在x轴、y轴上的位移值，改变物体的位置，有点类似于定位。

1.语法

transform: translate(x,y);     /* x表示x轴（横坐标）移动的距离；y表示y轴（纵坐标）移动的距离 */
          
或者分开写，如下所示：
transform: translateX(n);
transform: translateY(n);

1.2 代码体验

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <div class="box"></div>
</body>
以上代码得到的结果如图，div盒子处于浏览器窗口的左上角。
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        transform: translate(400px, 200px);  /* 增加上2d位移的代码 */
        transform: translate(50%, 50%);  /* 移动单位使用百分比，是相对自身宽度和高度进行移动*/
    }
</style>
<body>
    <div class="box"></div>
</body>
可以看出在原来代码的基础上，增加了： transform: translate(400px, 200px);这行代码后，div盒子从右上角移动了上图位置，并且是水平向右移动400px，垂直向下移动200px。

右图是使用代码：transform: translate(50%, 50%);得到的效果，可以发现使用百分比单位，是针对自身的宽度和高度而言的。

1.3. 注意点

① 注意translate属性中的x和y用逗号分隔
② translate最大的优点：不会影响到其他元素的位置
③ translate中位移不仅可以使用具体的距离单位，也可以使用百分比单位，而百分比单位是相对于自身元素的，比如 translate:(50%,50%); ，则表示为向右移动自身宽度的一半，向下移动自身高度的一半；
④ ranslate对行内标签没有效果

2. 2D缩放 scale。

所谓缩放，就是缩小和放大。也就是说scale这个属性是控制物体放大或缩小的。

2.1 语法

transform:scale(x,y);    /* x表示x轴（横坐标）缩放的大小；y表示y轴（纵坐标）缩放的大小 */
transform:scale(2)       /* 只有一个值时，默认第二个值和第一个一样，也为2 */
          
或者分开写，如下所示：
transform: scaleX();     /*表示只设置x轴的缩放 */
transform: scaleY();     /*表示只设置y轴的缩放 */

2.2 代码体验

<style>
    .box {
        margin: 100px;
        width: 200px;
        height: 200px;
        background-color: pink;
        transform: scale(2, 0.5);   /* 增加缩放属性的代码 */
    }
</style>
<body>
    <div class="box"></div>
</body>
上图是使用代码：transform: scale(2, 0.5);得到的效果，可以发现宽度变为了原来的2倍，而高度变为了原来的一半。

2.3 注意点

①注意scale属性中的x和y用逗号分隔
②transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大，即值为1时，不放大也不缩小
③transform:scale(2,2) ：宽和高都放大了2倍，即值大于1时，为放大对应值倍数的效果
④transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
⑤transform:scale(0.5,0.5)：宽和高都缩小了0.5倍，即值小于1时，为缩小对应值倍数的效果
⑥sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

3.2D旋转 rotate

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

3.1 语法

transform:rotate(度数); /* 度数单位为deg */

3.2 代码体验

<style>
    .box {
       width: 200px;
       height: 200px;
       background-color: pink;
       transform: rotate(30deg);  /* 增加旋转代码——表示绕着旋转中心点顺时针旋转50度 */    
    }
</style>
<body>
    <div class="box"></div>
</body>

由于增加了2D旋转rotate属性，所以div盒子进行了旋转。最后效果如上图所示。

3.3 注意点

① rotate里面跟度数，单位是 deg 比如 rotate(30deg)
②角度为正时，顺时针，负时，为逆时针
③默认旋转的中心点是元素的中心点

4.2D倾斜 skew

4.1 语法

transform: skew(x,y);  /* x表示水平方向（x轴）的倾斜角度; y表示垂直方向（y轴）的倾斜角度*/ 

或者分开写，如下所示：
transform: skewX(x);  /* 只设置x轴方向的倾斜 */
transform: skewY(y);  /* 只设置y轴方向的倾斜 */

4.2 代码体验

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        transform: skew(30deg,0);    /* 增加倾斜代码   x轴向左倾斜30度，y轴不变 */
    }
</style>
<body>
    <div class="box"></div>
</body>

增加了代码：transform: skew(30deg, 0); 后，div盒子向左倾斜了30度，如上图所示。

4.3 注意点

①skew里面的度数，单位也是 deg 比如 skew(30deg,0);
②注意skew属性中的x和y用逗号分隔
③如果skew（）里只设置一个值，该值表示x轴倾斜度数

5.2D转换中心点 transform-origin

一般缩放或者旋转默认的中心点都是元素的自身的中心点，但是有时我们想要的效果并不是这样的，比如需要绕着盒子的左下角进行旋转等，这时我们就需要使用transform-origin属性重新设置元素转换的中心点。

5.1 语法

transform-origin: x y;  /* x表示x轴的位置  有表示y轴的位置 */

5.2 代码体验

<style>
    .box {
        margin: 200px;
        width: 200px;
        height: 200px;
        background-color: pink;
        transform: rotate(60deg);
        transform-origin: 0 0;  /* 增加重新设置转换中心点，（0,0）即盒子的左上角
    }
</style>
<body>
    <div class="box"></div>
</body>
上左图是在默认转换中心点的基础上旋转60度的效果；

上右图是在增加代码：transform-origin: 0 0;后，将转换重点点转移到了盒子的左上角后旋转60度的效果。

5.3 注意点

①注意后面的参数 x 和 y 用空格隔开
② x y 默认转换的中心点是元素的中心点 (50% 50%)
③可以给x y 设置百分比、具体像素值或者方位名词（top bottom left right center）

6.2D转换综合写法

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

7. 2D 转换总结

CSS3转换transform，我们可以简单理解为变形，它有2D 和 3D 之分，今天主要介绍了2D的位移、缩放、旋转和倾斜。倾斜我们一般使用的不多，但是前三个相对比较重要，需要掌握基本的语法使用和对应的注意点，后期可以结合动画属性，做出好看的基本简单动画。

JJ_Smilewang

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
CSS3的2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换（transform）你可以简单理解为变形。在学习2D转换之前，我们需要先了解vscode中的二维坐标系，它和我们数学中的坐标系稍微有点不一样，它是向右为x轴正方向，向下为y轴正方向，如下图所示：1.2D位移 translate所谓的2d位移就是可以通过在x轴、y轴上的位移值，改变物体的位置，有点类似于定位。1.语法transform: translate(x,y);
复制链接

扫一扫