HTML+CSS中的2D转换之translate rotate scale

清疚 2022-12-02 15:26 248阅读 0赞

# 2D移动translate #

2D移动是2D转换中的一种功能，可以改变元素在页面中的位置，类似定位。

### 语法 ###

{
    transform: translate(x, y); /*x,y分别表示x轴和y轴移动的距离*/
    }
    /*或者分开写*/
    {
        transform: translateX(n);
        transform: translateY(n);
    }

### 特点 ###

*  定义2D转换中的移动，沿着X和Y轴移动元素
 *  translate最大优点：不会影响其他元素的位置
 *  translate中的百分比单位是相对于自身元素的translat(50%,50%）
 *  对行内标签没有效果

# 2D旋转rotate #

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

### 语法 ###

{
        transform: rotate(度数);
    }

### 特点 ###

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

### 案例 ###

利用div+css制作下拉框小三角

<!DOCTYPE html>
    <html>
        <head>
            <title>demo</title>
            <style>
                div{
                    position: relative;
                    width: 300px;
                    height: 35px;
                    border:1px solid pink;
                    /* transform:translate(200px,200px); */
                }
    
                div::after{
                    content: "";
                    position:absolute;
                    width: 8px;
                    height: 8px;
                    top:12px;
                    right:15px;
                    border-right: 1px solid pink;
                    border-bottom: 1px solid pink;
                    /* 設置過度，誰做動畫給誰加 */
                    transition:all 0.3s; 
                    transform: rotate(45deg)
                }
    
                div:hover::after{
                    transform:rotate(225deg);
                    top:15px;
                }
            </style>
        </head>
        <body>
            <div></div>
        </body>
    </html>

# 2D转换中心点transform-origin #

元素转换默认是以元素的宽和高的50%作为中心点，我们可以手动设置元素转换的中心点

### 语法 ###

{
        transform-origin: x y;
    }

### 特点 ###

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

### 案例 ###

当鼠标悬浮到div上时，div以左下角为旋转中心旋转360度

<!DOCTYPE html>
    <html>
        <head>
            <title>demo</title>
            <style>
                div{
                    width: 200px;
                    height: 200px;
                    margin:100px auto;
                    background-color: pink;
                    /* 設置左下角為旋轉中心 */
                    transform-origin: left bottom;
                    /* 設置過度動畫 */
                    transition: all 1s;
                }
    
                div:hover{
                    transform:rotate(360deg)
                }
    
            </style>
        </head>
        <body>
            <div></div>
        </body>
    </html>

# 2D转换缩放scale #

缩放，顾名思义就是可以放大和缩小，只要给元素添加了这个属性就能控制它的放大和缩小。

### 语法 ###

{
        transform: scale(x, y);
    }

### 特点 ###

*  参数x和y以逗号分隔
 *  参数x和y没有单位，而是放大或缩小宽度和高度的倍数
 *  transform:scale(1,1)宽和高放大一倍，相当于没放大
 *  transform:scale(2,2)宽和高放大2倍
 *  transform:scale(2)：只写一个参数时，第二个参数默认跟第一个参数一样，相当于transform:scale(2,2)
 *  transform:scale(0.5,0.5)宽和高缩小0.5倍
 *  scale缩放的最大优势：可以设置缩放的中心点，默认以中心点缩放，而且不会影响其它盒子。

### 案例 ###

<!DOCTYPE html>
    <html>
        <head>
            <title>demo</title>
            <style>
                div{
                    width: 200px;
                    height: 200px;
                    margin:100px auto;
                    background-color: pink;
                    /* 設置左下角為旋轉中心 */
                    /* transform-origin: left bottom; */
                    /* 設置過度動畫 */
                    transition: all 1s;
                }
    
                div:hover{
                    transform:scale(2,2)
                }
    
            </style>
        </head>
        <body>
            <div></div>
        </body>
    </html>

# 2D转换综合写法 #

综合写法即上面的一个或多个方法可以同时使用

### 用法与特点 ###

*  同时使用多个转换，格式为: transform: translate(x,y) rotate(Xdeg) scale(x,y) ...
 *  多个转换中间以空格分隔
 *  方法的顺序会影响转换的效果。（如果先旋转则会影响坐标轴的方向）
 *  **当同时有位移和其它属性的时候，记得要将位移放在最前面**

### 示例代码 ###

<!DOCTYPE html>
    <html>
    
    <head>
        <title>demo</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
                transition: all 0.8s;
            }
    
            div:hover {
                transform: translate(150px, 100px) rotate(360deg) scale(2);
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>