CSS3中的2D转换（位移、旋转、缩放）

最新推荐文章于 2024-02-29 18:55:43 发布

ItDaChuang

最新推荐文章于 2024-02-29 18:55:43 发布

阅读量1.5k

点赞数 1

分类专栏：前端 # CSS3 文章标签： css3 前端

本文链接：https://blog.csdn.net/ItDaChuang/article/details/120498873

版权

前端同时被 2 个专栏收录

43 篇文章 7 订阅

订阅专栏

CSS3

4 篇文章 0 订阅

订阅专栏

CSS3之2D转换

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

一、2D转换之移动 translate

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

语法：

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

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    /* 1. margin 外边距移动
    margin-top: 100px;
    margin-left: 100px; */
    /* 2. 定位水平移动100px，垂直移动100px 
    position: relative;
    top: 100px;
    left: 100px;*/
    /* 3. transform 的 translate 移动 */
    transform: translate(100px,100px); 
}

2D转换的【特点】：

translate 移动不会影响到其他元素的位置（绝对定位和外边距都会影响）

translate 中如果填百分比单位是相对于自身元素的大小的 translate(50%,50%)

<style>
   /* 清楚内外边距： *{ margin: 0;padding: 0;} */
   div {
       position: relative;
       width: 200px;
       height: 200px;
       background-color: pink;
       margin: 30px auto;
   } 
   p {
       position: absolute;
       top: 50%;		/* 向下移动大盒子高度的一半 */
       left: 50%;		/* 向右移动大盒子宽度的一半 */
       width: 50px;
       height: 50px;
       background-color: skyblue;
       transform: translate(-50%,-50%);/* 向上和左移动小盒子高度和宽度的一半 */
   }
</style>
<body>
    <div>
        <p></p>
    </div>
</body>

translate 移动对【行内标签】没有效果

二、2D转换之旋转 rotate

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

语法：

transform: rotate(度数);

特点：

rotate 里面填度数，单位是 deg 如：transform: rotate(45deg);
参数为正时，顺时针旋转，为负时，逆时针旋转
默认旋转中心为元素的中心点

案例一：

2D 旋转 rotate 做三角，用旋转做下面示图：

<style>
    div {
        position: relative;
        width: 200px;
        height: 35px;
        border: 1px solid red;
    }
    .box::after {
        content: "";        /* 伪元素必须要有的属性 */
        display: inline-block;      /* 伪元素是行内元素，无法给大小 */
        position: absolute;
        top: 9px;
        right: 12px;
        width: 10px;
        height: 10px;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        transform: rotate(45deg);
    }
</style>

2D 旋转中心点 transform-origin 可以设置

transform-origin:x y;

参数 x 和 y 用空格隔开
x y 默认值是元素中心点（50% 50%）
还可以给 x y 设置像素值，或方位名词（top bottom left right center）

案例二：

制作如下效果

<style>
    div {
        overflow: hidden;
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin: 20px auto;
    }
    div::before{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(./images/qq.png);
        transform-origin: 0 100%;
        transform: rotate(90deg);
        transition: all 1s;
    }
    div:hover::before{
        transform: rotate(0deg);
    } 
</style>

三、2D转换之缩放 scale

transform 中的 scale 可以放大和缩小元素。

语法：

transform: scale(x,y);

其中 x，y 是数字，表示缩放宽、高的倍数，大于 1 是放大，小于 1 是缩小。
只有一个参数时，表示宽高同比例缩放。
直接修改宽高值也可以改变盒子大小，区别是：修改width、和 height 值以左上角为中心向下向右改变大小，并会影响文档流。而 scale 缩放以盒子几何中心为中心点向上下左右同时进行缩放，也可以通过 transform-origin 设置缩放中心点，同旋转用法一致。

案例：

利用缩放做如下效果

<style>
    div{
        overflow: hidden;
        float: left;
        margin: 10px;
    }
    div img {
        transition: all 0.5s;		// 添加动画
    }
    div img:hover {
        transform: scale(1.2);		// 添加缩放
    }
</style>
<body>
    <div><a href="#"><img src="./images/kc.png" alt=""></a></div>
    <div><a href="#"><img src="./images/kc.png" alt=""></a></div>
    <div><a href="#"><img src="./images/kc.png" alt=""></a></div>
</body>

案例：

制作如下效果

<style>
    ul {
        text-align: center;
    }
    li {
        list-style: none;
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 1px solid blue;
        text-align: center;
        line-height: 25px;
        margin: 5px;
        transition: all .5s;
    }
    li:hover {
        transform: scale(1.3);
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

四、2D转换综合写法

同时使用多个转换，格式为：transform： translate() rotate() scale() 即可。
三种转换书写的顺序会影响转换效果（如果先旋转会改变坐标轴方向）
当有位移移动时，一定要把位移放在最前面

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 50px auto;
        transition: all .5s;
    }
    div:hover {
        transform: translate(50px,100px) rotate(180deg) scale(1.5);
    }
</style>
<body>
    <div></div>
</body>